이 시리즈는 타입스크립트 핸드북을 요약한 시리즈입니다.

제네릭(Generics)이란?

제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징이다.
특히, 한가지 타입보다 여러가지 타입에서 동작하는 컴포넌트를 생성하는데 사용된다

1. 제네릭의 정의와 예시

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

1-1. 제네릭 타입 미적용 시

function getText(text) {
  return text;
}

위 함수는 text라는 파라미터에 값을 넘겨 받아 text를 반환해준다.

getText('hi'); // 'hi'
getText(10); // 10
getText(true); // true

hi, 10, true 등 어떤 값이 들어가더라도 들어온 그대로 반환한다.

1-2. 제네릭 타입 적용 시

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

함수를 호출할 때 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있다.

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

위 코드 중 getText<string>('hi')를 호출 했을 때 함수에서 제네릭이 어떻게 동작하는지 자세히 보자.

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

먼저 위 함수에서 제네릭 타입이 <string>이 되는 이유는 getText() 함수를 호출할 때 제네릭(함수에서 사용할 타입) 값으로 string을 넘겼기 때문.

getText<string>();

그리고 나서 함수의 인자로 hi 라는 값을 아래와 같이 넘기게 되면

getText<string>('hi');

getText 함수는 아래와 같이 타입을 정의한 것과 같다

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

위 함수는 입력 값의 타입이 string이면서 반환 값 타입도 string이어야 한다.