[Typescript] Mapped Type (매핑된 타입)

[ 목차 ]
Introduction
Mapped Type 사용하기
Pick 유틸타입 살펴보기

 

Introduction

매핑된 타입(Mapped Type)은 제네릭을 사용해서 다른 타입을 바탕으로 새로운 타입을 만드는 것을 의미합니다.

 

특징으로는,

1. 중복을 방지할 수 있고,

2. 다른 타입을 참조해서 사용하며,

3. 제네릭과 인덱스 시그니처를 사용한다는 것입니다.

 

 

 

 

Mapped Type 사용하기

/** 예제1 **/
type StudyRoom {
	name: string;
    cost: string;
    availablePeople: number;
    startTime: Date;
    endTime: Date;
}

// StudyRoom 타입을 바탕으로 새로운 타입을 생성
type NewStudyRoom = { [K in keyof StudyRoom]: boolean };

const newStudyRoom: NewStudyRoom = {
	name: true,
    cost: true,
    availablePeople: false,
    startTime: false,
    endTime: false
}

인덱스 시그니처를 살펴보면, in 키워드를 사용하는 것을 알 수 있습니다.

StudyRoom 타입의 key를 순회하면서, 해당 key들을 NewStudyRoom 타입에 동적으로 생성합니다.

 

 

 

 

Pick 유틸타입 살펴보기

/** 예제2 **/

// Pick 유틸타입을 구현한 코드
type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
};

// Pick 사용하기
type StudyRoom {
	name: string;
    cost: string;
    availablePeople: number;
    startTime: Date;
    endTime: Date;
}

type PickedError = Pick<StudyRoom, "label">; // error!
type PickedOk = Pick<StudyRoom, "name" | "cost"; // { name: string; cost: string }

Pick 유틸타입도 Mapped Type을 바탕으로 만들어졌습니다.

구현코드를 보면 제네릭 + 인덱스 시그니처 + in 키워드를 사용했다는 것을 알 수 있습니다.

 

 

참고

https://www.typescriptlang.org/ko/docs/handbook/2/mapped-types.html