Mapped Type

Mapped Type?

맵드 타입이란 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법을 의미한다

기존의 자바스크립트에서 배열에 내장되어있는 map과 동일한 일을 해준다고 생각하면 이해하기 쉽다

const arr = [1, 2, 3, 4, 5];

arr.map(v => v * 2); // 2, 4, 6, 8, 10

Mapped Type은 이처럼 기존의 타입을 반환하면서 각각의 속성에 반복적으로 접근해 새로운 타입을 반환한다

이전 시간에 다루었던 유틸리티 타입 중 Partial, Omit, Pick 도 이러한 성질의 문법이다

실제로 타입스크립트 내부 코드를 살펴보면 위의 3가지 유틸리티 타입은 Mapped Type을 이용해서 구현되어 있다

형태는 대부분 아래와 같다

{ [p in K]: T }

for...in 자바스크립트의 과 유사해보이며 실제로 비슷하게 동작한다

대충 자바스크립트 코드로 보자면 아래처럼 바꿀 수 있다

const K = [1, 2, 3];

for(const p in K){
  K[p]: T;
}

타입스크립트에서 실제로 K는 타입이고 K의 속성을 순회하여 index가 아닌 value를 p로 받고 T와 쿵짝쿵짝해서 새로운 타입을 만든다

모든 속성을 순회해서 새로운 타입..?

지난 시간에 배운 Partial은 존재하던 타입에서 모든 속성을 옵셔널로 바꿔주는 문법이었는데 Mapped Type을 이용해서 구현할 수 있을 것 같다

Mapped Type 사용해보기

interface UserInfo {
    name: String;
    age: number;
    sex: String;
    address: String;
    email: String;
    username: String;
    password: String;
}

UserInfo에서 받아와서 in으로 돌리면 name: String 처럼 하나의 키벨류쌍이 나오니 keyof를 사용해서 해당 타입의 키값만 뽑아 순회를 돌린다

type newType = {
    [p in typeof UserInfo]? : //??;
}

이제 p에는 name, age, sex, address... 옵셔널?가 붙어서 나온다

각각의 속성에 맞게 타입을 정의해주면되는데..

여기서 한 번 고민했다

type newType = {
    [p in typeof UserInfo]? : UserInfo[p];
}

이렇게 해주면

name?: UserInfo[name]// 'String';
age?: UserInfo[age]// 'number';
...

으로 순회하면서 전체 속성에 옵셔널을 줄 수 있게 된다!

하지만 이는 UserInfo에만 사용할 수 있는, 재사용이 불가능한 코드다

제네릭 타입을 이용해서 변수처럼 타입을 받아서 새로운 타입을 반환하는, 함수처럼 작동하는 문법을 만들 수 있다

type MyPartial<T>{
    [p in typeof T]? : T[p];
}