[TypeScript] 제네릭(Generic) 사용법

1. 제네릭(Generic) 이란?

- 다양한 타입의 객체들을 다루는 메서드나 클레스에 컴파일 시 타입 체크를 해주는 기능이다. C#, Java 등의 언어에서 재사용성이 놓은 컴포넌트를 만들 때 사용된다.

- 의도하지 않은 타입이 들어오지 않도록 방지해주는 역할이며 여러 개의 타입을 가진 컴포넌트를 사용할 때 유용하다.

- 관용적으로 <T>를 사용한다.(아무 단어나 써도 무방하다.)

 

2. 제네릭의 장점

- 객체의 타입 안전성을 높이고 자료형을 정하지 않고 여러 타입을 사용 할 수 있게 해 주기 때문에 번거로움이 줄어든다.

- 한번의 선언으로 다양한 타입에 재사용이 가능해진다.

 

3. any와의 차이점

- any는 자료의 타입을 제한할 수 없고 function을 통해 어떤 타입의 데이터가 리턴되는지 알 수 없다는 단점이 있다.

 

4. 사용법

1) 기본 형식

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

2) SuperPrint에 Generic 적용하기 예시

const one = superPrint([1, 2, 3, 4]);
const two = superPrint([true, false, true]);
const three = superPrint(["a", "b", "c"]);
const four = superPrint([1, 2, true, false]);
const five = superPrint([1, 2, true, false, "abc"]);

 

- 5번째 줄 superPring는 number, boolean, string이 혼용되었음에도 Generic으로 인하여 오류가 발생하진 않는다.

 

3) 활용 예시

 

function superPrint<T>(a: T[]) {
  return a[0];
}
type SehunExtra = {
  favFood: string;
};
type Player2<E> = {
  name: string;
  extraInfo: E;
};

type SehunPlayer = Player2<{ favFood: string }>;

const sehun4: SehunPlayer = {
  name: "sehun",
  extraInfo: {
    favFood: "kimchi",
  },
};