Mapped Type

github.com/Microsoft/TypeScript/pull/12114

Mapped types by ahejlsberg · Pull Request #12114 · microsoft/TypeScript

* 캡틴 판교님의 글에 기반하여 작성되었습니다. 물론 그대로 베끼지는 않았죠 ㅋㅋ

joshua1988.github.io/ts/usage/mapped-type.html

 

 

맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미합니다.

맵드 타입이 사용된 부분 중 대표적인 예로, 유틸리티 타입 중 Partial, Pick, Readonly가 정의된 꼴을 들 수 있습니다.

아래와 같은 in을 사용하여 새로운 타입을 만들 수 있습니다.

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

/**
 * From T, pick a set of properties whose keys are in the union K
 */
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

/**
 * Make all properties in T readonly
 */
type Readonly<T> = {
    readonly [P in keyof T]: T[P];
};

 

mapped type은 기본적으로 아래와 같은 꼴로 사용할 수 있습니다.

in은 마치 for문처럼 동작합니다.

{ [ P in K ] : T }
{ [ P in K ] ? : T }
{ readonly [ P in K ] : T }
{ readonly [ P in K ] ? : T }

 

실제적으로 mapped type을 이용해보기 위해서 몇가지 예시를 살펴보겠습니다.

 

1. 기초 개념

type myToy = "macbook" | "bossmonster" | "thinkpad";

// {mackbook : number, bossmonster: number, thinkpad: number} 꼴로 만들고 싶다.

// myToy를 하나씩 돌아간다. 이터레이터 역할을 하는 T: number 넘겨주면 의도대로 동작한다
// 쉽게 말해 T에 'macbook', 'bossmonster', 'thinkpad'가 들어가는 것.
type myToyPrice = { [T in myToy]: number };

const myToyPriceObj: myToyPrice = {
  macbook: 1234,
  bossmonster: 1346,
  thinkpad: 345,
};

 

2. Parital

 

이제 parital의 정의를 이해할 수 있습니다. 직접 만들어보겠습니다.

type Partial<T> = {
    [P in keyof T]?: T[P];
};

 

설명해보자면, keyof T는 "name" | "price" 타입입니다.

이 타입들이 하나씩 들어가면

"name"? : Toy["name"]

"price"? : Toy["price"]

과 같은 꼴이 됩니다. 모든 속성을 옵셔널 프로퍼티로 만드는 것이죠. 

type PartialMocked<T> = {
  [P in keyof T]?: T[P];
};

interface Toy {
  name: string;
  price: number;
}

const myToyObj: PartialMocked<Toy> = {
  name: "thinkpad",
};

 

여튼, Mapped Type은 이런 식으로 작동합니다!