TS - 제네릭(generic)

제네릭이란?

선언 시점이 아닌 생성 시점에 타입을 명시하여

하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다.

한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다.

 

<T>는 제네릭을 선언할 때 관용적으로 사용되는 식별자이며, 타입 파라미터(Type parameter)라 한다.

( 'T' 외의 값을 사용해도 된다고 하는데 대부분 'T' 를 쓰는것 같다.)

---

함수에서의 제네릭

type SuperPrint = {
  <T>(arr: T[]): void;
};

const superPrint: SuperPrint = (arr) => {
  arr.forEach((item) => console.log(item));
};

superPrint([1, 2, 3]); // superPrint <number>(arr: number[]) => void
superPrint(["1", "2", "3"]); // superPrint <string>(arr: string[]) => void
superPrint([true, true, false]); // superPrint <boolean>(arr: boolean[]) => void
superPrint([1, "2", true]);
// superPrint <number|string|boolean>(arr: (number|string|boolean)[]) => void

위 코드의 SuperPrint type에는 제네릭이 사용되었다.

때문에 superPrint 함수의 파라미터 타입은 인수의 타입에 의해 결정된다. (* 코드 하단 4줄 참고)

 

// 의 내용에서 알 수 있듯 각 함수 호출마다 전달되는 인수의 타입을 통해 타입 파라미터를 추론하여 정한다.

* superPrint<number>( [1,2,3] )의 형태로 직접 명시도 가능하다.

 

코드 제일 하단에는 3가지 타입의 인수를 전달했는데,

제네릭이 없었다면 모든 타입의 경우의 수를 전부 명시해 줘야 했을 것이다.

 

위 코드에서 제네릭 대신 any를 사용해도 에러 없이 동작하지만, 
코드가 조금만 추가되면 언제나 터질수 있는 시한폭탄을 설치한 것과 같다.

type checker의 도움을 받을 수 있도록 제네릭을 사용하도록 하자.

 

함수를 생성하기 전,

함수의 매개변수, 리턴 값의 타입을 Call Signature로 먼저 정해보고

그 과정에서 다양한 타입을 명시해줘야 하는 경우에는

제네릭 사용을 고려해 보도록 하자!