💁🏻‍♀️ 소개

TypeScript의 매핑 타입(Mapped Types)은 기존 타입을 기반으로 새로운 타입을 생성하거나 변환하는 기능입니다.
매핑 타입을 사용하면 기존 타입의 구조를 유지하면서 새로운 타입을 생성할 수 있어, 코드의 중복을 줄이고 유연한 타입 변환을 수행할 수 있습니다.

❶ 매핑 타입 기본 개념

매핑 타입은 기존 타입의 모든 속성을 순회하며 새로운 타입을 생성하는 구문입니다.
매핑 타입은 in 키워드를 사용하여 속성을 순회하고, 기존 속성의 타입을 변환할 수 있습니다.

매핑 타입 구문

매핑 타입은 다음과 같은 구문으로 작성합니다.

type MappedType<T> = {
    [P in keyof T]: NewType;
};

위 예시에서 T는 기존 타입을 의미하고, [P in keyof T] 는 기존 타입의 모든 속성을 순회하는 구문입니다.
: NewType 부분은 새로운 타입을 지정하는 부분입니다.

매핑 타입 사용 예제

매핑 타입을 사용하여 기존 타입의 모든 속성을 선택적(Optional) 속성으로 변환하는 예제를 살펴봅시다.

interface Person {
    name: string;
    age: number;
    address: string;
}

type OptionalPerson = {
    [P in keyof Person]?: Person[P];
};

const person1: OptionalPerson = {
    name: "John",
};

const person2: OptionalPerson = {
    name: "Jane",
    age: 30,
};

위 예시에서 OptionalPersonPerson 타입의 모든 속성을 선택적(Optional) 속성으로 변환한 새로운 타입입니다.

❷ 내장 매핑 타입

TypeScript는 일반적으로 사용되는 매핑 타입을 미리 정의해두고 있어, 직접 구현할 필요 없이 사용할 수 있습니다.

Partial<T>: 모든 속성을 선택적(Optional) 속성으로 변환합니다.
Required<T>: 모든 선택적(Optional) 속성을 필수 속성으로 변환합니다.
Readonly<T>: 모든 속성을 읽기 전용(Read-only) 속성으로 변환합니다.
Pick<T, K extends keyof T>: 특정 속성만 추출하여 새로운 타입을 생성합니다.

📝 총정리

TypeScript의 매핑 타입(Mapped Types)은 기존 타입을 기반으로 새로운 타입을 생성하거나 변환하는 기능으로, 기존 타입의 구조를 유지하면서 타입 변환을 수행할 수 있습니다.
매핑 타입은 [P in keyof T]: NewType와 같은 구문으로 작성되며, 기존 타입의 모든 속성을 순회하고 새로운 타입을 지정할 수 있습니다.

TypeScript에서는 내장 매핑 타입들을 제공하여 사용자가 직접 구현할 필요 없이 사용할 수 있습니다.
Partial<T>, Required<T>, Readonly<T>, Pick<T, K extends keyof T> 등의 내장 매핑 타입들을 활용하여 쉽게 타입 변환을 수행할 수 있습니다.

profile
#UXUI #코린이

0개의 댓글