TypeScript 제네릭

제네릭

함수를 생성할 때 함수에서 사용할 매개 변수, 리턴 타입을 정의하지 않고 호출하는 시점에 원하는 타입을 지정해서 사용한다.

• 함수 내부의 코드는 동일하고 매개 변수나 리턴 타입만 다를 경우 제네릭 문법을 이용하면 하나의 함수에서 구현할 수 있다.
• 제네릭에 지정한 문자 T는 아무 문자나 사용 가능하고 여러 글자로 사용 가능하다.
  • Type의 앞글자인 T를 주로 사용한다.

(() => {
  // T가 아닌 식별자 규칙을 따르는 아무 문자나 사용 가능하지만 관례적으로 Type의 첫글자인 T를 사용
  function echo<T>(msg: T): T {
    return msg;
  }

  // 타입 추론이 가능하다면 제네릭을 안 붙여도 됨
  console.log(echo<string>("hello"));
  console.log(echo<number>(100));
  console.log(echo<boolean>(true));
})();

1. 타입 제약

제네릭에 전달받은 타입을 지정한 타입만 가능하도록 제약한다.

• extends 키워드 사용

(() => {
  function echo<T extends string | number>(msg: T): T {
    return msg;
  }

  console.log(echo<string>("hello"));
  console.log(echo<number>(100));
  // console.log(echo<boolean>(true)); // 타입 에러

  const str = echo<string>("hello");
  const num = echo<number>(123.456);

  console.log(str.toUpperCase(), num.toFixed(2));

  function echo2<T extends { length: number }>(msg: T): T {
    return msg;
  }

  // echo2<number>(100) // length 속성이 없음
  const str2 = echo2<string>("hello");
  const num2 = echo2<number[]>([10, 20]);

  console.log(str2.length, num2.length);
})();

2. 사용처

함수, 인터페이스, 클래스 정의에 사용한다.