타입스크립트 제네릭

타입스크립트는 함수에서 변수들의 타입을 정해주기 위해 사용한다는 사실은 다들 알것이라 생각합니다. 그러다보니 함수를 선언하는데에 어느정도 제약사항이 생기게 됩니다. 우리가 어떤 함수를 선언한다고 할때 특정 변수타입만을 사용하는 경우도 많지만 그렇지 않은 경우도 있습니다. 그럴때 우리는 제네릭을 이용할 수 있습니다. 그럼 예제를 보면서 한번 알아보겠습니다.

기본

const helloGeneric = (value: string): string => value

helloGeneric('hi')   //  오류 X
helloGeneric([3])      //  타입 오류

다음과 같은 함수가 있다고 합시다. 그럼 이 함수는 string타입변수만 받아서 리턴할 수 있습니다. 하지만 우리는 타입을 가리지 않고 무엇이든 받아서 리턴하는 함수를 만들어서 그 함수를 범용성 있게 사용하고 싶습니다. 이때 우리는 제네릭을 사용할 수 있습니다.

const helloGeneric = <T extends unknown>(value: T) : T => value

helloGeneric('hi')   //  오류 X
helloGeneric([3])      //  오류 X

tsx파일에서 제네릭을 이용하려면 제네릭 문법과 tsx문법에 차이를 주어야 하기 때문에 <T extends unknown>을 이용해 차이를 줄 수 있습니다. 참고사이트

keyof 와 함께 사용하는 방법

어떤 객체에서 원하는 property를 뽑을 때 사용할 수 있는 제네릭의 예를 한번 알아 봅시다.
일단 keyof에 대해 먼저 알아보겠습니다.

interface IPerson {
  name: string
  age: number
}

type value = keyof People  // value는 'name' or 'age'라는 값만 가질 수 있습니다.

그럼 예제를 한번 살펴보겠습니다.

const people : IPerson = {
  name: 'john',
  age: 30, 
}

const getProp = <T extends unknown, K extends keyof T>(obj: T, value: K): T[K] => obj[value]      

const name = getProp(people, 'name')   // string 타입
const age = getProp(people, 'age')   // number 타입

여기서 T는 IPerson을 가지게 되고, K는 name 혹은 age를 가지게 됩니다. 이때 T[K]로 obj[value]타입을 설정하면 obj[value]의 타입은 자동적으로 추론됩니다.
첫번째 인자로 두번째 인자가 추론되고 첫번째 인자와 두번째 인자를 통해 리턴 타입이 추론되게 됩니다.

결론

타입스크립트 제네릭은 재사용 가능한 개발에 필수적인 요소이며 이를 잘 이용해야 합니다. 심지어 React는 함수 컴포넌트를 이용하여 개발하기 때문에 재사용 가능한 컴포넌트를 구현하는데에 아주 중요한 요소일 것입니다.