맵드 타입(Mapped Type)

유틸리티 타입인, Partial이 어떻게 구현되어있지?

• 유틸리티타입 Partial가 내부적으로 어떻게 되어있는지 궁금해서 선언파일 가서 확인했다.

/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

• ??? [P in keyof T] ?? 이게 뭐지? 타입스크립트에서도 자바스크립트의 for...in 문법의 in을 지원하나?
• 찾아보니 이건 타입스크립트의 맵드타입 이란다. 뭔지 알아보고, 실습을 해보자아

mapped type

타입스크립트 맵드타입 에 가면 맨위에 When you don’t want to repeat yourself, sometimes a type needs to be based on another type. 라는 말이있다.

허접한 영어실력으로 번역해보면, 반복하기 싫을 때, 때때로 타입은 다른타입을 기본으로 한다. 라고 한다
난 타입을 새로 만들때 아애 새로 만드는게 아닌, 다른 타입을 기본으로 하여 만들수 있다고 받아들였다.

중복된 타입선언을 줄일 수 있어 좋을듯하다.

enum Type{
    AD,
    AP
}

type Champion = {
    name: string;
    level: number;
    type: Type
    health: number
}

• Champion이란 타입이 존재한다. 근데 난 또 Monster라는 타입이 필요한데, Champion이라는 타입의 모든 파라미터를 옵셔널로 받는 타입을 정의해야한다.

enum Type{
    AD,
    AP
}

type Champion = {
    name: string;
    level: number;
    type: Type
    health: number
}

type Monster = {
  name?: string;
  level?: number;
  type?: Type;
  health?: number
}

• 이렇게 중복되는 코드가 존재하게끔 만들어야할까?
• NONO ! 맵드 타입을 이용해보자

enum Type{
    AD,
    AP
}

type Champion = {
    name: string;
    level: number;
    type: Type
    health: number
}

type Monster = {
    [P in keyof Champion]?: Champion[P];
}

• 이렇게 간단하게 맵드타입을 이용하여 코드 중복을 줄이며 타입을 정의할수있다. (사실 위의 맵드타입이 바로 유틸리티 타입 Partial가 구현된 방법이다.)

뭔가 javascript의 map함수처럼 원하는 형태로 변환을 해준다. (그래서 mapped type이라고 한다.)
그리고 in키워드가 눈에 띄는데 나는 이게 자바스크립트의 오브젝트의 모든 프로퍼티나 메서드들을 순회하는 for ... in의 in과 유사하다고 느꼈다. 맵드타입의 in키워드도 타입의 모든 프로퍼티를 순회하기 때문이다.

결론

• 맵드 타입은 타입 정의할때 기존의 타입을 재사용하여 중복된 타입 정의를 줄일 수 있다.
• 자바스크립트의 map함수와 같이 타입을 '변환'해준다.
• Partial은 내부적으로 mapped type으로 구현되어있다.