[TypeScript] Mapped Type

TypeScript에서 Mapped Type는 기존 타입을 변형하여 새로운 타입을 생성하는 역할을 한다.

Mapped Types를 사용하면 객체 타입의 각 속성을 다른 타입으로 변환할 수 있는데, 이를 통해 코드의 재사용성과 타입 안전성을 높일 수 있다고 한다.

Mapped Type는 주로 keyof 연산자와 함께 사용되어, 기존 타입의 키들을 기반으로 새로운 타입을 정의한다.

 

기본적인 형식

type MappedType<T> = {
  [P in keyof T]: T[P]; // 형식 1
  [ P in K ] : T; // 형식 2
  [ P in K ]? : T; // 형식 3
  readonly [ P in K ] : T; // 형식 4
  readonly [ P in K ]? : T; // 형식 5
};

 

다른 다양한 예시를 통해 Mapped Types를 파보자.

예시 1: 게시판과 게시글

게시판(Board)과 게시글(Post) 객체에 대해 Mapped Types를 사용하여 각 속성을 string으로 변환하는 타입

interface Post {
  id: number;
  title: string;
  content: string;
  authorId: number;
}

interface Board {
  id: number;
  name: string;
  description: string;
  posts: Post[];
}

// 모든 속성을 string으로 변환하는 Mapped Type
type Stringified<T> = {
  [P in keyof T]: string;
};

type StringifiedPost = Stringified<Post>;
type StringifiedBoard = Stringified<Board>;

// 사용 예시
const examplePost: StringifiedPost = {
  id: "1",
  title: "게시글 제목",
  content: "게시글 내용",
  authorId: "10",
};

const exampleBoard: StringifiedBoard = {
  id: "1",
  name: "게시판 이름",
  description: "게시판 설명",
  posts: "[]" // JSON 문자열로 직렬화된 posts 배열
};

예시 2: 유저 보안 레벨

유저 객체에 대해 읽기 전용 속성을 갖도록한 Mapped Type.

interface User {
  id: number;
  username: string;
  email: string;
  securityLevel: 'low' | 'medium' | 'high';
}

// 모든 속성을 읽기 전용으로 변환하는 Mapped Type
type ReadonlyUser<T> = {
  readonly [P in keyof T]: T[P];
};

type ReadonlyUserType = ReadonlyUser<User>;

// 사용 예시
const user: ReadonlyUserType = {
  id: 1,
  username: "user1",
  email: "user1@example.com",
  securityLevel: 'high'
};

// user.id = 2; // 오류: 읽기 전용 속성이기 때문에 수정 불가

예시 3: 유료 3단계 구독제 서비스

구독제 서비스를 정의하고, 각 구독제 단계별로 다른 속성을 갖도록한 Mapped Type.

interface SubscriptionPlan {
  basic: {
    price: number;
    features: string[];
  };
  premium: {
    price: number;
    features: string[];
    support: string;
  };
  vip: {
    price: number;
    features: string[];
    support: string;
    dedicatedManager: string;
  };
}

// 모든 속성의 타입을 기본적으로 변경하는 Mapped Type
type PriceOnly<T> = {
  [P in keyof T]: { price: T[P]['price'] };
};

type PriceOnlySubscriptionPlan = PriceOnly<SubscriptionPlan>;

// 사용 예시
const priceOnlyPlan: PriceOnlySubscriptionPlan = {
  basic: { price: 10 },
  premium: { price: 20 },
  vip: { price: 30 },
};

예시 4: API 요청 및 응답 타입 변환

API 요청 객체와 응답 객체를 정의하고, 이를 통해 응답 객체를 Partial(선택적)로 변환하는 Mapped Type

interface ApiRequest {
  endpoint: string;
  method: 'GET' | 'POST' | 'PUT' | 'DELETE';
  headers: Record<string, string>;
  body?: any;
}

interface ApiResponse {
  status: number;
  data: any;
  headers: Record<string, string>;
}

// 모든 속성을 선택적으로 변환하는 Mapped Type
type PartialResponse<T> = {
  [P in keyof T]?: T[P];
};

type PartialApiResponse = PartialResponse<ApiResponse>;

// 사용 예시
const exampleResponse: PartialApiResponse = {
  status: 200,
  data: { message: "성공" }
  // headers는 선택적이므로 생략 가능
};

예시 5: 상태 관리 객체의 불변성 보장

상태 관리(State Management) 객체를 정의하고, 이 객체의 모든 속성을 불변(immutable)으로 만드는 Mapped Type

interface AppState {
  user: {
    id: number;
    name: string;
    email: string;
  };
  settings: {
    theme: 'light' | 'dark';
    notifications: boolean;
  };
  data: any[];
}

// 모든 속성을 깊은 읽기 전용으로 변환하는 Mapped Type
type DeepReadonly<T> = {
  readonly [P in keyof T]: DeepReadonly<T[P]>;
};

type ReadonlyAppState = DeepReadonly<AppState>;

// 사용 예시
const appState: ReadonlyAppState = {
  user: {
    id: 1,
    name: "John Doe",
    email: "john@example.com"
  },
  settings: {
    theme: 'light',
    notifications: true
  },
  data: []
};

// appState.user.id = 2; // 오류: 읽기 전용 속성이기 때문에 수정 불가
// appState.settings.theme = 'dark'; // 오류: 읽기 전용 속성이기 때문에 수정 불가

---

Mapped Type를 통해 유연하게 TypeScript를 적어보자.