TIL. TypeScript 제네릭

제네릭 (Generics)?

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

제네릭의 한 줄 정의와 예시

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

function getText(text){
  return text;
}

위 함수는 text라는 파라미터에 값을 넘겨 받아 text를 반환해준다.
hi,10,true등 어떤 값이 들어가도 그대로 반환한다.

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

그럼 제네릭은 어떻게 사용되는가?

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함수는 아래와 같이 타입을 정의한 것과 같다.

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

참고 :https://joshua1988.github.io/ts/guide/generics.html#%EC%A0%9C%EB%84%A4%EB%A6%AD%EC%9D%98-%ED%95%9C-%EC%A4%84-%EC%A0%95%EC%9D%98%EC%99%80-%EC%98%88%EC%8B%9C