맵드 타입
타입스크립트 맵드 타입
맵드 타입 은 이미 정의된 타입을 가지고 새로운 타입을 생성할 때 사용하는 타입 문법을 의미한다.
in
type Animal: 'cat' | 'dag' | 'pig'
type AnimalIn = {
[Name in Animal]: boolean;
}
이 코드는 맵드 타입 문법을 적용하여 새로운 타입을 정의했다.
type AnimalIn = {
cat: boolean;
dag: boolean;
pig: boolean;
}
결과적으로 이 코드처럼 타입 별칭을 정의하는 것과 같다.
- 이미 정의된 타입으로 새로운 타입을 생성하려면
[Name in Animal]형태의 문법을 사용해야 한다.
- 인덱스 시그니처 문법 안에서 사용하는
in앞의 타입 이름은 개발자 마음대로 지울 수 있다.- 의미 없는 이름을 짓는 것보다 최대한 역할을 나타낼 수 있는 이름으로 짓는 것이 좋다.
keyof
문자열 유니언 타입으로 새로운 타입을 생성하는 것이 아니라 기존에 정의된 타입 일부분을 맵드 타입으로 변경해 보겠다.
interface Animal {
nmae: string;
type: string;
}
type AnimalPropCheck = {
[A in keyof Animal]: boolean;
}
name 과 type 속성을 갖는 Animal 인터페이스에 맵드 타입을 적용하여 각 속성의 유무를 나타내고 있다.
type AnimalPropCheck = {
name: boolean;
type: boolean;
}
결과적으로 이 코드처럼 타입 별칭을 정의하는 것과 같다.
keyof는 특정 타입의 키 값만 모아 문자열 유니언 타입으로 변환해주는 키워드이다.
interface Animal {
name: string;
type: string;
}
type Animal1 = keyof Animal;
type Animal2 = 'name' | 'skill'
Animal1과 Animal2는 같은 타입이다.
맵드 타입을 이용하면 문자열 유니언 타입을 이용하여 객체 형태의 타입으로 변환할 수 있을 뿐만 아니라, 객체 형태의 타입에서 일부 타입 정의만 변경해 새로운 객체 타입을 정의할 수 있다.
mpa() API로 맵드 타입
map() API는 자바스크립트 배열에서 사용할 수 있는 내장 API이다.
map()API는 특정 배열의 각 요소를 변환하여 새로운 배열로 만들어준다.
let Animal = ['cat', 'dag', 'pig'];
let AnimalMap = Animal.map((animal) => {
return {
[animal]: true
}
});
배열에 map() API를 사용하여 이름을 키로 갖고 출석 여부를 값으로 갖는 객체로 변환했다.
매핑 수정자
매핑 수정자 는 맵드 타입으로 타입을 변환할 때 속성 성질을 변환할 수 있도록 도와주는 문법이다.
- 매핑 수정자는
+,-,?,readonly등이 있다.
type Animal = {
name: string;
type: string;
}
type AnimalOption = {
[A in keyof Animal]? : string;
}
타입을 보면 속성 이름 선언 부분에 ?를 붙여서 속성을 모두 선택적으로 사용할 수 있는 옵션 속성으로 변환했다.
- 맵드 타입을 사용할 때 속성에
?또는readonly등을 붙여 타입 성질을 바꿀 수 있다.
- 매핑 수정자를 사용하면 옵션 속성 ?나 readonly 등 일반 속성 이외에 추가된 성질을 모두 제거할 수 있다.
type Animal<T> = {
[A in keyof T]-? : T[A]
}
let cat: AnimalRequired<AnimalOption> = {
name: '초코',
type: 'cat'
}
제네릭으로 받은 타입을 이용하여 맫드 타입으로 변환해 주면서 속성 선언 부분에 -?를 붙여주었다.
이렇게 하면 제네릭 타입으로 받은 속성의 옵션 속성을 모두 제거하겠다는 의미다.
속성 선언 부분에 타입 변수 이름을 A로 짓고 속성 값의 타입을 T[A]로 정의하여 제네릭으로 넘겨받은 타입의 속성 이름과 속성 값 타입이 그대로 연결되도록 선언했다.
