[TypeScript] 맵드 타입(Mapped Type)

이 글은 인프런의 실전 프로젝트로 배우는 TypeScript 강의를 듣고 정리한 글입니다.

맵드 타입은, 쉽게 말하면 자바스크립트의 map함수를 타입에 적용한 것이라고 보면 된다. 즉 기존에 정의되어 있는 타입을 새로운 타입으로 변환해 주는 문법이다.

맵드 타입을 알아보기 전에 자바스크립트의 map 함수가 무엇인지부터 살펴보자.

JavaScript - map() API

let arr = [{ id: 1, title: '함수' }, { id: 2, title: '변수' }, { id: 3, title: '인자'}];
let result = arr.map(function(item) {
  return item.title;
});
console.log(result); // ['함수', '변수', '인자'];

result는, arr을 돌면서 파라미터의 title을 출력하는 형태이다. 배열의 각 요소를 순회하여 객체에서 문자열로 변환하였다.

 

형태

type Heroes = "Hulk" | "Captain" | "Thor";
type HeroAges = { [K in Heroes]: number };

이런 식으로, {Heroes 타입을 도는, number 타입을 가진 인덱스 K} 와 같은 형태로 나타낸다.

사진을 보면, HeroAges가 내의 각 속성들의 타입이 전부 number로 되어있는 것을 확인할 수 있다.