타입스크립트의 맵드 타입(Mapped Types)은 기존 타입을 새로운 타입으로 변환해주는 문법이다. 자바스크립트의 map 배열 메서드를 타입에 적용한 것과 비슷하다(그래서 이름이 Mapped Types다).

맵드 타입 개념 톺아보기

아래 디바이스 브랜드를 나타내는 유니온 타입 Devices가 있다. 여기에 각 디바이스 브랜드의 가격 정보가 포함된 객체를 만들고 싶을 때 맵드 타입을 활용할 수 있다.

type Devices = 'APPLE' | 'OPPO' | 'XIAOMI'; // 디바이스 브랜드를 나타내는 유니온 타입
type DevicePrices = { [P in Devices]: number }; // 디바이스 브랜드 타입을 순회해서 key로 정의되는 맵드 타입

const deviceInfo: DevicePrices = {
  APPLE: 1_200_000, // 언더스코어 "_"를 이용해 숫자를 구분하는 Numeric Seperators 문법
  OPPO: 800_000,
  XIAOMI: 700_000,
};

[P in Devices] 코드는 Devices 타입의 각 문자열을 순회한 후 number 타입을 값으로 가지는 객체의 키로 정의된다. 자바스크립트의 for in 문법과 비슷하다. 키 부분에 유니온 타입을 직접 명시할 수도 있다.

type DevicePrices = { [P in 'APPLE' | 'OPPO' | 'XIAOMI']: number }

맵드 타입을 사용하지 않았다면 아래처럼 각 브랜드마다 number 타입을 일일이 정의해야 한다.

type DevicePrices = {
	APPLE: number;
	OPPO: number;
	XIAOMI: number;
}

맵드 타입 예제

서브셋 타입

아래 Subset 맵드 타입은 인터페이스 같은 객체를 정의하는 타입을 받아, 해당 객체의 타입을 부분적으로 사용할 수 있는 타입으로 변환해준다(부분 집합을 만족하는 타입으로 변환).

type Subset<T> = { [P in keyof T]?: T[P] };
// keyof T : T로 받은 객체의 모든 속성명을 유니온 타입으로 나열
// [P in keyof T]?... : T 객체의 속성 값 자체를 타입으로 만듦. 물음표를 붙였으므로 선택적 속성

interface Student {
  name: string;
  age: number;
}

const ageOnly: Subset<Student> = { age: 18 }; // OK
const nameOnly: Subset<Student> = { name: 'Smith' }; // OK
const smith: Subset<Student> = { name: 'Smith', age: 18 }; // OK
const empty: Subset<Student> = {}; // OK (선택 속성이므로)

Boolean 타입으로 변환

기존 인터페이스의 모든 속성을 Boolean 타입으로 변환해주는 맵드 타입을 만들 수 있다. 위에서 살펴봤던 서브셋(부분 집합) 타입으로 변환하는 맵드 타입과 같은 원리다.

type MakeBoolean<T> = { [P in keyof T]?: boolean };
// keyof T : T로 받은 객체의 모든 속성명을 유니온 타입으로 나열
// [P in keyof T]?... : T의 모든 속성 값을 Boolean 타입으로 만듦. 물음표를 붙였으므로 선택적 속성

interface Student {
  name: string;
  age: number;
}

const studentMap: MakeBoolean<Student> = {
  name: true, // OK
  age: undefined, // OK (선택 속성이므로)
};

studentMap.name = 3 // Error (boolean 타입이 아니므로)

유틸리티 타입