[Typescript] Generic을 통한 재사용 컴포넌트 구현

https://www.typescriptlang.org/ko/docs/handbook/2/generics.html

 

Typescript를 사용할때 가장 어려움을 겪을 수 있는 부분은 바로 재사용 컴포넌트 구현시 입니다.

재사용 컴포넌트란 말은 다양한 Type을 받을 수 있고 다양한 Type을 반환한다는 것인데, 

 

해당 Type에 따라서 각각 다른 컴포넌트를 구현할 수 없으니, Generic을 통해 컴포넌트 사용자가 Type을 설정하게 한다는 것입니다.

 

---

예를 들면, 

 

아래와 같이 Number와 String을 받아 해당 Type의 Array를 반환하는 함수가 있다면,

아래와 같이 정의 할수 있습니다.

 

 

const arrayNumber = (a: number, b: number) => [a, b];

 

const arrayString = (a: string, b: string) => [a, b];

 

 

| 를 사용하여 Type을 2가지로 받을수도 있지만,

타입이 늘어나는 만큼 추가가 필요하며,

Return Type이 string 이나 number가 될수있으므로 type 재정의가 필요합니다.

 

const arrayNumberOrString = (a: string | number, b: string | number) => [a, b];

 

const numbers = arrayNumberOrString(1, 2) as number[];

 

 

any : Generic처럼 어떤 Type도 받을 수 있지만 Return Type을 정의할 수 없습니다.

 

const arrayAny = (a: any, b: any) => [a, b];

 

 

---

아래와 같이 Genenric Funciton 을 구현할 수 있습니다.

 

 

 

const arrayT = <T>(a: T, b: T) => [a, b];

 

arrayT<number>(1, 2);  // [1,2]

arrayT<string>('1', '2');  // ['1','2']

// type 생략 가능합니다.

arrayT('1', '2');  // ['1','2']