[Ts] 제네릭

1️⃣ 제네린이란?

제네릭이란 타입을 마치 함수의 파라미터처럼 사용하는 것을 의미한다.

function getText<T>(text: T): T {
  return text;
}

getText<string>('hi');
getText<number>(10);
getText<boolean>(true);

• 위 함수는 제네릭 기본 문법이 적용된 형태이고 함수를 호출할 때 마다 함수 안에서 사용할 타입을 넘겨줄 수 있다.

2️⃣ 제네릭을 사용하는 이유

function logText(text: string): string {
  return text;
}

• 위 코드는 인자를 하나 넘겨 받아 반환해주는 함수이다. 이 함수의 인자와 변환 값은 모두 string으로 지정되어 있지만 만약 여러가지 타입을 허용하고 싶다면 any를 사용할 수 있다. 하지만 함수의 인자로 어떤 타입이 들어갔고 어떤 값이 반환되는지는 알 수가 없다. 이러한 문제점을 해결할 수 있게 도와주는 것이 바로 제네릭이다.

function logText<T>(text: T): T {
  return text;
}

// #1
const text = logText<string>("Hello Generic");
// #2
const text = logText("Hello Generic");

먼저 함수의 이름 바로 뒤에 (T)라는 코드를 추가하고 함수의 인자와 반환값에 모두 T라는 타입을추가한다. 이렇게 되면 함수를 호출할 때 넘긴 타입에 대해 타입스크립트가 추정할 수 있게 된다. 따라서 함수의 입력 값에 대한 타입과 출력 값에 대한 타입이 동일한지 검증할 수 있게 된다.

3️⃣ 제네릭 타입 변수

  function logText<T>(text: T): T {
  console.log(text.length); // Error: T doesn't have .length
  return text;
}

• 위 코드를 변환하려고 하면 컴파일러에서 에러가 난다. 왜냐하면 text에 .length가 있다는 단서가 어디에도 없기 때문이다. 그래서 이런 경우에는 아래와 같이 제네릭에 타입을 줄 수가 있다.

function logText<T>(text: T[]): T[] {
  console.log(text.length); // 제네릭 타입이 배열이기 때문에 `length`를 허용합니다.
  return text;
}

• 이 제네릭 함수 코드는 일단 T라는 변수 타입을 받고, 인자 값으로는 배열 형태의 T를 받습니다. 예를 들면, 함수에 [1,2,3] 처럼 숫자로 이루어진 배열을 받으면 반환 값으로 number를 돌려준다. 이런 방식으로 제네릭을 사용하면 꽤 유연한 방식으로 함수의 타입을 정의 해줄 수 있다.