[TS] 제네릭

제네릭(Generic) 이란 함수나 인터페이스, 타입 별칭, 클래스 등을 다양한 타입과 함께 동작하도록 만들어주는 타입스크립트의 기능이다.

제네릭이 필요한 상황

any 타입의 문제

다음과 같이 매개변수 타입을 any로 정의하면 함수 호출 결과가 모두 any 타입으로 추론된다.

function func(value: any) {
  return value;
}

let num = func(10);
let str = func("string");

num.toUpperCase(); // ❌ 런타임 오류 발생

num에는 Number타입의 값 10이 저장되어 있다. 그러나 any 타입으로 추론되었기 때문에 toUpperCase같은 String타입 전용 메서드를 사용해도 타입스크립트가 오류를 감지하지 못한다.

이 코드는 실제로 실행하면 런타임 오류를 발생시키는 위험한 상태가 된다.

 

unknown 타입의 문제

이번에는 매개변수 타입을 unknown으로 정의해보자.

function func(value: unknown) {
  return value;
}

let num = func(10);
// unknown 타입

let str = func("string");
// unknown 타입

num.toUpperCase(); // ❌
num.toFixed(); // ❌

toUpperCase같은 잘못된 메서드 호출은 방지할 수 있으나, toFixed같은 Number타입의 올바른 메서드 호출도 함께 오류로 판단하게 된다.

 

따라서 num에 10이 저장될 것이 분명한데도 이 값을 사용하려면 다음과 같이 비효율적으로 타입 좁히기를 해야 한다.

function func(value: unknown) {
  return value;
}

let num = func(10);

if (typeof num === "number") {
  num.toFixed(); // 타입 좁히기 후에야 사용 가능
}

이런 상황에서 제네릭을 이용하면 문제가 간단히 해결된다.

 

제네릭 함수

제네릭 함수는 두루두루 모든 타입의 값을 다 적용할 수 있는 범용적인 함수이다.

function func<T>(value: T): T {
  return value;
}

let num = func(10); // number 타입

let bool = func(true); // boolean 타입

let str = func("string"); // string 타입

 

 

타입 명시하기

제네릭 함수를 호출할 때 타입 변수에 할당할 타입을 직접 명시할 수도 있다.

function func<T>(value: T): T {
  return value;
}

let arr = func<[number, number, number]>([1, 2, 3]);

위 코드의 흐름은 다음과 같다:

1. T에 [number, number, number] 튜플 타입이 할당됨
2. 매개변수 value와 반환값 타입이 모두 튜플 타입이 됨

 

만약 타입을 명시하지 않았다면 T가 number[]배열 타입으로 추론되었을 것이다. 타입스크립트는 타입을 추론할 때 항상 일반적이고 범용적인 타입으로 추론하기 때문이다.

 

이렇듯 타입 변수에 할당하고 싶은 특정 타입이 있다면 함수 호출 시 꺾쇠 괄호 안에 직접 명시하는 것이 좋다.
그렇지 않은 대다수의 상황에서는 타입이 자동으로 잘 추론되므로 굳이 타입을 명시하지 않아도 된다.