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']
[Typescript] for loop (for in)구현하기 (0) | 2023.02.18 |
---|---|
React Typescript 함수 type 정의시 eslint 오류 해결 (0) | 2023.02.18 |
type vs interface (0) | 2023.01.26 |
댓글 영역