Typescript 맵드 타입(mapped type)

맵드 타입(mapped type)

 

기본문법

type T1 = { [K in 'prop1' | 'prop2']: boolean };

• 맵드 타입으로 만들어지는 것은 객체이기 때문에 중괄호로 감싸있다.
• 그리고 중괄호 안에 대괄호가 있는데 대괄호안에는 key 부분을 나타내는 것이며 in라는 키워드가 맵드 타입을 정의해준다.
• 즉 위의 코드르 보면 in 뒤에 붙어있는 union 문자열이 타입의 key로서 속성으로 boolean이라는 타입을 각각 정의받게 된다.
• 마치 함수를 사용하는 것처럼 이용 가능하다.

 

 

 

 

입력된 인터페이스의 모든 속성 바꾸기

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

type MakeBoolean<T> = { [P in keyof T]?: boolean};
const pMap: MakeBoolean<Person> = {};
pMap.name = true; //통과
pMap.age = false; //통과

• 위와같이 맵드 타입을 이용하면 Person의 인터페이스의 키와 타입 값들의 속성을 바꿀 수 있다.
• Person의 인터페이스가 T로 재네릭으로 들어가 선택 타입과 boolean을 받아 속성이 변화된 것을 눈치 챌 수 있다.

 

 

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

type T1 = Person['name'];

type Readonly<T> = { readonly[P in keyof T]: T[P]};
type Partial<T> = { [P in keyof T]?: boolean};

type T2 = Partial<Person>
type T3 = Readonly<Person>

• 맵드 타입 문법을 이용하여 readonly 키워드를 붙여주는 것과 선택 타입과 boolean 타입을 붙여주는 것으로 각각 부여해주었다.
• 이때 T[P]라는 의미는 Person이 만약 재네릭으로 T로서 들어가게 된다면 Person 인터페이스의 타입 값을 의미한다고 보면 된다. 즉 Person의 타입 값들을 그대로 타입 값으로 설정한다는 뜻이다. P는 타입 값을 가르키기 위한 키 값이라고 보면 된다.
• 즉 바뀌는 것을 readonly와 선택 타입 ' ? '을 붙여주는 것 뿐이라고 볼 수 있다.

 

 

 

 

Pick 맵드 타입

type Pick<T, K extends keyof T> = { [P in K]: T[P] }; //생략 가능

interface Person {
    name: string;
    age: number;
    language: string;
}

type T1 = Pick<Person, 'name' | 'language'>;

• 재네릭과 함께 사용한 맵드 타입의 활용한 코드인데 Pick 라는 기능을 보여주고 있다.
• 재네릭에서 Person의 인터페이스를 T로 받아와 K extends keyof T 라는 키워드를 사용하여 K가 T에 할당받도록 하였다.
• 이때 K는 꼭 T에 할당 되도록 T인 Person의 키 이름 중에 포함되어 있거나 키 이름이 딱 들어맞아야 하는 조건이 생긴다.
• 그리고 바로 맵드 타입을 이용하여 [P in K]의 의미는 T(Person)로 할당 해줄 K을 맵드 타입의 키 이름으로 지정하고 T[P]을 이용하여 그대로 Person 인터페이스의 속성 값 그대로 사용한다는 코드로 해석할 수 있다.
• Pick은 타입스크립트 내장 기능이기에 type Pick<T, K extends keyof T> = { [P in K]: T[P] };이 생략 가능하다.

 

 

 

Record 맵드 타입

interface Person {
    name: string;
    age: number;
    language: string;
}

type Record<K extends string, T> = { [P in K]: T }; //생략 가능
type T1 = Record<'p1' | 'p2', Person>;
type T2 = Record<'p1' | 'p2', number>;

• 위의 코드를 보면 <K extends string, T> 의미는 문자열로 이루어진 K와 T을 받는다고 보면 되고 [P in K]는 K 속성으로 이루어진 인터페이스를 이루게 해준다고 볼 수 있다. 값의 타입은 T에 들어오는 인터페이스 자체로 설정하였다.
• 즉 문자열인 p1, p2로 인터페이스의 키 이름으로 하고 타입 값을 Person 인터페이스로 한다는 의미이다.
• const T1 = { p1: Person; p2: Person; } 이렇게 만들어 진다.
• 이때 Record는 타입스크립트 내장 기능이기에  type Record<K extends string, T> = { [P in K]: T }; 생략 가능

 

 

 

enum과의 맵드 타입 활용

enum Fruit {
    Apple,
    Banana,
    Orange,
}

const FRUIT_PRICE: { [key in Fruit]: number } = {
    [Fruit.Apple]: 1000,
    [Fruit.Banana]: 1500,
    [Fruit.Orange]: 1500,
};

• 위의 코드처럼 enum을 이용하면 맵드 타입과 함께 사용할 수 있다.
• Fruit enum을 이용하여 키 이름으로 지저하고 number 타입으로 모두 지정해주었다.
• [key in Fruit]을 해주었기에 이때 Fruit enum에 있는 과일이 하나라도 빠지면 안된다. 또 새로운 것이 Fruit enum에 추가되어도 오류가 등장한다.