맵드 타입(Mapped Types)

맵드 타입(Mapped Types)

Mapped Types은 기존 정의된 타입을 새로운 타입으로 변환해주는 문법.
마치 자바스크립트 map() API 함수를 타입에 적용한 것과 같은 효과를 가진다

Mapped 타입을 이용하면 몇 가지 규칙으로 새로운 interface 만들 수 있다.

Mapped Types은 언제 사용하는가? 🤔

Mapped 타입은 기존 interface의 모든 속성을 선택(Optional) 속성 또는 읽기 전용(ReadOnly)으로 만들 때 주로 사용한다.

✔️ 예제 코드

// Mapped Types의 입력으로 사용될 인터페이스
interface IPersion {
	name: string;
	age: number;
}

// IPerson에 Mapped Types을 적용해서 만들수 있는 인터페이스의 예시
interface IPersionOptional {
	name?: string;
	age?: number;
}

interface IPersionReadOnly {
	readonly name: string;
	readonly age: number;
}

in 키워드로 정의하는 Mapped Types

두 개의 속성을 boolean 타입으로 만드는 Mapped Types

• in 오른쪽에는 문자열의 유니온 타입이 올 수 있다.

type T1 = {
	[k in 'props1' | 'props2']: boolean;
};
// {
//	props1: boolean;
//  props2: boolean;
// }

Partial과 ReadOnly 내장 타입

타입스크립트 내장 타입인 Partial과 ReadOnly는 Mapped Types으로 만들어 졌다.

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

type T1 = IPerson['name']; // (1)
type ReadOnly<T> = { readonly [P in keyof T]: T[P] }; // (2)
type Partial<T> = { [P in keyof T]?: T[P] }; // (3)
type T2 = Partial<IPerson>; 
type T3 = ReadOnly<IPerson>; 

(1) interface의 특정 속성의 타입을 추출할 떄 사용되는 문법
(2) interface의 모든 속성을 읽기 전용으로 만들어 주는 Mapped Types.
ㅤㅤkeyof T에 의해 interface T의 모든 속성 이름이 유니온 타입으로 만들어진다.
ㅤㅤT[P]는 interface T에 있는 속성 P의 타입을 그대로 사용하겠다는 의미
(3) interface의 모든 속성을 선택(Optional) 속성으로 만들어주는 Mapped Types

Pick 내장 타입

interface에서 원하는 속성만 추출할 때 사용.

type Pick<T, K extends keyof T> = {
    [P in K]: T[P];
}

interface IPersion {
	name: string;
	age: number;
    language: string;
}

type T1 = Pick<IPersion, 'name' | 'language'>;
// {
//	name: string;
//  language: string;
// }

Record 내장 타입

입력된 모든 속성을 같은 타입으로 만들어주는 Mapped Types.

type Record<K extends string, T> = {
    [P in K]: T[P];
}

type T1 = Record<'p1' | 'p2', IPersion>;
// {
//	p1: IPersion;
//  p2: IPersion;
// }