TypeScript(8) - Mapped Types

맵드 타입을 이용하면 중복을 피하기 위해서 다른 타입을 바탕으로 새로운 타입을 생성할 수 있습니다.

Mapped type을 사용하는 것은 type이 다른 type에서 파생되고 동기화 상태를 유지해야 하는 경우에 특히 유용하다.

//현재 사용자의 구성 값
type AppConfig = {
  username:string;
  email:string
};

//사용자에게 구성 값을 변경할 수 있는 권한이 있는지 여부
type AppPermissions = {
  changeUsername :boolean;
  changeEmail : boolean;
};

여기서 Appconfig 와 AppPermissions사이에 암시적 관계가 있기 때문에 문제가 있다.
새 구성 값이 AppConfig에 추가될때마다 AppPermission에 해당 boolean값도 있어야 한다.

두 type 에 대한 적절한 업데이트를 동시에 수행하기 위해 향후 프로그램 편집자의 규칙에 의존하는 것보다 type 시스템이 이 관계를 관리하도록 하는것이 좋다.

이럴때 mapped type을 사용하자!

Mapped Type

컴퓨터 과학 맥락에서 map이라는 용어는

• 한 type을 다른 type으로 변환하는 것을 의미하거나
• 유사한 type을 변환된 type의 다른 목록으로 바꾸는 것을 의미한다.

Array.prototype.map()을 보면

[1,2,3].map(value => value.toString());
//["1","2","3"]

여기에서 배ㅔ열의 각 숫자를 가져와서 문자열로 변환했다.
이것처럼 TS에서 Mapped Type은 하나의 Type을 가져와 각 속성에 변환을 적용하여 다른 type으로 변환한다는 의미이다.

사용해보면

type Users = 'John'|'Han'|'Kim';

type UserFirstNames = {[K in Users]:string};
const userFirstNameInfo:UserFirstNames = {
  John : 'Doe',
  Han : 'Ho',
  Kim:'jun',
}

세명의 유저의 FirstName을 가지는 객체를 만들고 그에 대한 타입을 주었다.
[K in Users]여기에서 map()을 사용하는 것처럼 하나씩 string 타입으로 변환시켜 준다.

example

더 구제적이고 실용적인 예시를 살펴보자

type DeviceFormatter<T> = {
  [K in keyof T]: T[K];
}
//여기서 T는 Device가 들어가고, K는 manufacturer,price이다.

type Device={
  manufacturer : string;
  price : number;
};

const iphone : DeviceFormatter<Device> = {manufacturer:'apple', price:100};

만약 객체에서 가격이나 제조사만 가지거나 둘다 가지지 않는 경우에는?

const priceOnly : DeviceFormatter<Device> = {price:100};
const empty : DeviceFormatter<Device> = {};

에러가 나고 물음표를 추가해서 프로퍼티들을 선택사항으로 만들어준다

type DeviceFormatter<T> = {
  [K in keyof T]?: T[K];
}