Typescript - Mapped Type

milkbottle·2024년 8월 11일

Mapped Type

Mapped Types는 기존 타입을 변환하여 새로운 타입을 생성하는 강력한 기능이다.
이 기능은 특히 객체의 속성을 동적으로 조작하거나 유사한 구조의 여러 타입을 쉽게 정의할 때 유용하다.
이번 글에서는 Mapped Types의 개념과 활용 방법을 단계별로 알아본다.

Mapped Types란?

Mapped Types는 TypeScript에서 기존 타입의 모든 속성을 반복(iterate)하며 새로운 타입을 생성하는 기능이다.
Mapped Types는 주로 제네릭 타입과 함께 사용되며, 반복적인 코드 작성 없이 타입을 변환할 수 있도록 돕는다.
기본적인 Mapped Types의 형태는 다음과 같다.

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

위 예제에서 MyMappedType은 제네릭 타입 T의 모든 속성을 반복하여, 같은 타입을 가진 새로운 타입을 정의한다.

예제

모든 속성을 선택적으로 만들기

기본적으로 TypeScript에서 객체의 모든 속성을 선택적(optional)으로 만들기 위해 ?를 사용할 수 있다.
하지만 많은 속성을 가진 타입에서 이를 일일이 적용하는 것은 비효율적이다.
이럴 때 Mapped Types를 사용하면 쉽게 모든 속성을 선택적으로 만들 수 있다.

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

Partial 타입은 주어진 타입 T의 모든 속성을 선택적으로 변환한다.

interface User {
  id: number;
  name: string;
  age: number;
}

type PartialUser = Partial<User>;

/*
PartialUser 타입은 다음과 같이 변환된다:
{
  id?: number;
  name?: string;
  age?: number;
}
*/

이 예제에서 PartialUser는 User 타입의 모든 속성을 선택적으로 만든 새로운 타입이다.

모든 속성을 읽기 전용으로 만들기

모든 속성을 읽기 전용으로 설정하는 것도 Mapped Types로 간단하게 처리할 수 있다.

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

이 Readonly 타입은 주어진 타입 T의 모든 속성을 읽기 전용으로 변경한다.

interface User {
  id: number;
  name: string;
  age: number;
}

type ReadonlyUser = Readonly<User>;

/*
ReadonlyUser 타입은 다음과 같이 변환된다:
{
  readonly id: number;
  readonly name: string;
  readonly age: number;
}
*/

ReadonlyUser는 User 타입의 모든 속성을 읽기 전용으로 만든 새로운 타입이다.
이렇게 생성된 타입은 속성의 값을 변경할 수 없도록 보장한다.

특정 속성만 필수로 만들기

Mapped Types를 사용하여 특정 속성만 필수로 만들고 나머지는 그대로 유지할 수 있다.
이 기능은 객체의 일부 속성만 필수로 만들고 싶을 때 유용하다.

type RequiredByKeys<T, K extends keyof T> = {
  [P in keyof T as P extends K ? P : never]-?: T[P];
};

이 RequiredByKeys 타입은 주어진 타입 T에서 특정 속성 K만 필수로 만들고, 나머지 속성은 선택적으로 유지한다.

interface User {
  id?: number;
  name?: string;
  age?: number;
}

type RequiredIdUser = RequiredByKeys<User, 'id'>;

/*
RequiredIdUser 타입은 다음과 같이 변환된다:
{
  id: number;
  name?: string;
  age?: number;
}
*/

이 예제에서 RequiredIdUser는 User 타입에서 id 속성만 필수로 만들고, 나머지 속성은 선택적이다.

결론

TypeScript의 Mapped Types 기능은 기존 타입을 유연하게 변환하여 새로운 타입을 생성할 수 있게 해준다.
이 기능을 사용하면 반복적인 타입 정의를 줄이고, 코드의 유지보수성을 높일 수 있다.
특히 대규모 프로젝트나 복잡한 타입 정의가 필요한 상황에서 Mapped Types는 매우 유용한 도구가 된다.

0개의 댓글