TS026. 타입스크립트 오브젝트의 Key-Value Mapping 알아보기

타입스크립트의 키 값 매핑 (Key-Value Mapping)

• 타입스크립트엔 키-값 매핑이라는 개념이 존재한다.
• 특정 타입의 키와 다른 타입의 값을 통해 타입을 정의할 수 있는 강력한 기능이다.
• 일반적으로 아래와 같은 문법을 띈다.

interface MyObject {
  [key: KeyType]: ValueType;
}

예제: 키-값 매핑으로 이전 타입 재활용하기

• 아래와 같이 User 타입, Post 타입, ApiResponse 타입을 정의했다.
• 여기서 UserApiResponse 라는 더 구체적인 타입을 새로 정의해야 하는데, 이 때 키-값 매핑을 활용하여 ApiResponse 에서 정의했던 내용을 재활용 할 수 있다.

type User = {
  name: string;
  age: number;
  nickname: string;
  password: string;
};

type Post = {
  title: string;
  content: string;
};

type ApiResponse = {
  user: User;
  users: User[] | undefined;
  admin: User | null;
  posts: Post[];
};

• 재활용을 함으로써 갖는 이점은 ApiResponse 의 형태가 변했을 때 재활용한 UserApiResponse2 에도 동일한 변화가 가해진다는 것이다.
• DRY 원칙을 위배하지 않는 타입스크립트 코딩이 가능하다.

// 재활용 안하는 버전
type UserApiResponse1 = {
  user: User;
  users: User[] | undefined;
  admin: User | null;
};

// 재활용 하는 버전
type UserApiResponse2 = {
  user: ApiResponse["user"];
  users: ApiResponse["users"];
  admin: ApiResponse["admin"];
};

루핑(Looping) 이용하기

• 위에 키값을 하나씩 입력하던 것과 같다.
• in 을 이용해 키를 looping 하는 것은 실전에서 아주 많이 사용한다.

type UserApiResponse3 = {
  [k in "user" | "users" | "admin"]: ApiResponse[k];
};

유틸리티 타입 (Utility Types) 이용하기

Pick 이용하기

• 위에서 in 키워드를 통해 키값을 하나씩 입력하던 것과 같다.

type PickedUserApiResponse = Pick<ApiResponse, "user" | "admin" | "users">;

Omit 이용하기

• 제외할 것 빼고 다 가져올 때 유용하다.
• 그러나 Pick 과 달리 나중에 원본에 무언가 추가됐을 때 유의해야 할 것이다.

type OmitUserApiResponse = Omit<ApiResponse, "posts">;

keyof 키워드를 통해 객체의 키값들을 유니온으로 가져오기

• 객체의 키 값을 모두 union 으로 가져올 수 있다.

type AllKeys = keyof ApiResponse;

AllKeys 를 타입으로 한 key 가 어떻게 자동완성되는지 볼 수 있다.

keyof 를 통해 루핑 돌아보기

type UserApiStatus4 = {
  [k in keyof ApiResponse]: ApiResponse[k];
};

keyof 에서 하나만 제외하기

type UserApiResponse5 = {
  [k in Exclude<keyof ApiResponse, "posts">]: ApiResponse[k];
};

전부 옵셔널로 만들기

type UserApiResponse6 = {
  [k in Exclude<keyof ApiResponse, "posts">]?: ApiResponse[k];
};

유니온 타입의 key-value mapping 을 이용한 예시

• 유니온 타입의 key-value mapping 을 하면 결과도 union 을 건 것과 동일하다.
• 단순히 union 을 이용하기보다 의미론적인 결과를 도출할 때 유용할 것이다.

interface Person {
  code: string;
  age: number;
}

interface Company {
  code: number;
  location: string;
}

type Sponsor = Person | Company;
type SponsorCode = Sponsor["code"]; // string | number 의 union 타입이 된다.