[Typescript] 제네릭(Generic)에 대해 알아보자!

1. 개요

Typescript를 이용해 서비스를 개발하다보면 제네릭이 많이 사용된다.

만약 제네릭을 사용해본 적이 없다 하더라도 여러 프레임워크, 라이브러리에 제네릭을 이용해 개발된 기능이 있기 때문에  본인이 모르는 사이 제네릭을 사용한 적이 있을 것이다.

이번 포스트에서 제네릭이 무엇이고, 어떻게 사용할 수 있는지 알아보자!

 

2. 제네릭(Generic)이란?

Typescript에서 제네릭(Generic)은 유연하게 동작하면서도 타입 안정성을 유지할 수 있는 기능이다.

제네릭을 이용한다면 다양한 타입에서 동작하는 함수를 작성할 수 있기에 유지보수성, 재사용성이 증가한다.

 

3. 문제의 배경

// javascript
funuction arrayWrap(val){
  return [val];
}

이 함수는 입력된 값(val)을 배열로 감싸 return해주는 함수이다.

val로는 여러 타입의 값이 입력 가능하다. 그렇다면 val의타입은 어떻게 지정해야 할까?

 

any타입으로 지정하는것을 생각해볼 수 있다.

하지만 any타입은 타입 체크가 무력화되지 때문에 예상치 못한 런타임 에러가 발생할 수 있다.

function arrayWrap(val: any): any[] {
  return [val];
}

const wrappedString = arrayWrap("hello"); // any[]
console.log(wrappedString[0].toUpperCase()); // OK

const wrappedNumber = arrayWrap(42);
console.log(wrappedNumber[0].toUpperCase()); // ERROR!!!

이런 문제를 해결하기 위해 다양한 타입에 대응해줄 방법이 필요해지는데,

이 때 제네릭을 사용할 수 있다.

 

4. 제네릭을 이용한 타입 처리

아래의 방법으로 제네릭을적용할 수 있다.

function arrayWrap<T>(val: T): T[] {
  return [val];
}

• <T> : 제네릭 타입 매개변수로, 함수가 호출될 때 val의 타입으로 바뀐다.
• (val: T) : val은 T 타입이라는걸 명시한다. T는 어떤 타입이든 될 수 있으며, 이 값이 배열에 담겨 return된다.
• T[]: 이 함수는 T 타입의 배열을 반환한다는 뜻이다.

T는 제네릭 타입임을 나타내는 임의의 이름이므로 더 구체적인 이름으로 사용할 수 있다.

제네릭을 이용함으로써 arrayWrap은 다양한 타입에 대응하면서도 타입 안정성을 유지할 수 있게 되었다.

서비스를 개발할 때 제네릭을 이해하고 이용한다면 서비스의 안정성과 유연성을 확보하는데에 도움이 될 수 있을것이다.