[TS] 맵드 타입

맵드 타입(Mapped Type)은 기존 객체 타입을 기반으로 새로운 객체 타입을 만드는 기능이다.

 

유저 정보를 관리하는 함수들을 작성해보자.

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

function fetchUser(): User {
  return {
    id: 1,
    name: "woodstock",
    age: 20,
  };
}

function updateUser(user: User) {
  // 수정 기능
}

 

updateUser 함수로 유저 정보를 수정하려는데, 매개변수 타입이 User여서 수정하고 싶은 프로퍼티만 골라 보낼 수 없다.

 

이 상황을 해결하기 위해 모든 프로퍼티를 선택적으로 만든 새 타입을 정의해보자.

type PartialUser = {
  id?: number;
  name?: string;
  age?: number;
};

function updateUser(user: PartialUser) {
  // 수정 기능
}

하지만 이럴 경우 User와 PartialUser가 중복된 프로퍼티를 정의하고 있어 좋지 않다.

 

맵드 타입을 사용하면 이 문제를 해결할 수 있다.

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

type PartialUser = {
  [key in "id" | "name" | "skill"]?: User[key];
};

function updateUser(user: PartialUser) {
  // 수정 기능
}

updateUser({
  skill: "TypeScript",
});

[key in "id" | "name" | "skill"]는 각 키를 순회하며 새로운 타입을 만든다. User[key]는 인덱스드 액세스 타입으로 해당 프로퍼티의 타입을 가져온다.

 

keyof와 함께 사용

맵드 타입은 keyof 연산자와 함께 사용할 수 있다.

type PartialUser = {
  [key in keyof User]?: User[key];
};

 

모든 프로퍼티의 타입을 변환하는 것도 가능하다.

type BooleanUser = {
  [key in keyof User]: boolean;
};

 

읽기 전용 타입 만들기

모든 프로퍼티를 읽기 전용으로 만들 수도 있다.

type ReadonlyUser = {
  readonly [key in keyof User]: User[key];
};

 

주의사항

맵드 타입은 타입 별칭에서만 사용할 수 있다. 인터페이스에서는 사용할 수 없다.