맵드타입이란

기존에 정의된 타입을 가지고 새로운 타입으로 변환해주는 문법을 의미합니다.

var arr = [{ id: 1, title: '함수'}, 
           { id: 2, title: '변수'}, 
           { id: 3, title: '인자'}];

var result = arr.map(function(item) {
  return item.title;
});
console.log(result); // ['함수', '변수', '인자'];

1. 기존 js의 map 함수를이용하여 객체에서 문자열로 변환하였습니다.

2. 맵드타입은 자바스크립트의 map 함수를 타입에 적용했다고 보시면 됩니다.

{ [ P in K ] : T }
{ [ P in K ]? : T }
{ readonly [ P in K ] : T }
{ readonly [ P in K ]? : T }

1. 위와 같은 문법을 사용한다고 보시면 됩니다.

맵드 타입 예시를 map() API로 구현

var heroes =['capt','hulk','thor']
var heroAttendance = heroes.map(function(hero){
 return{
   [hero]:true
}
});

//  여기서 heroAttendance 배열을 
// 출력하면 아래와 같이 정의가 됩니다.

var heroAttendance =[
  {capt:true},
  {hulk:true},
  {thor:true}
  ]

맵드 타입 기본 예제

type HeroNames ='capt' | 'hulk' | 'thor';
// 헐크, 토르, 캡틴을 유니온 타입으로 묶어주는 Heroes라는 타입

type HeroProfiles = { [K in Heroes]: number };
const heroInfo: HeroProfiles = {
  Hulk: 54,
  Thor: 1000,
  Capt: 33,
}

// [K in Heroes] 부분은 마치 자바스크립트의 
// for in 문법과 유사하게 동작

// Heroes 타입의 3개의 문자열을 각각 순회하여
// number 타입을 값으로 가지는 객체의 키로 정의 

{ Hulk: number } // 첫번째 순회
{ Thor: number } // 두번째 순회
{ Capt: number } // 세번째 순회


type HeroProfiles = {
  Hulk: number;
  Thor: number;
  Capt: number;
}
// HeroProfiles의 타입은 위와 같이 정의됨

맵드 타입 두번째 예시:keyof

keyof 는 특정 타입의 키 값만 모아 문자열 유니언 타입으로 변환해주는 키워드

interface Hero{
 name:string;
 skill:string;
}
// name과 skill 속성을 갖는 Hero 인터페이스에 맵드 타입을 
// 적용하여 HeroPropCheck 타입을 선언


type HeroPropCheck={
 [H in keyof Hero]: boolean; 
}

//  HeroPropCheck 타입의 정보는 아래와 같음

type HeropropCheck ={
 name: boolean;
 skill: boolean;
}
단 여기서 주의해야 할 점은, Hero 인터페이스의 
타입 정의를 바꾸는 것이 아닌
HeroPropCheck라는 새로운 타입을 생성 한 것 임

interface Hero{
 name: string;
 skill: string;
}

type HeroNames1 = keyof Hero;
type HeroNames2 = 'name' | 'skill';

// 조금 더 자세하게 보자면
type HeroPropCheck = {
 [H in keyof Hero] : boolean;
}

type HeroPropCheck={
 [H in 'name' | 'skill'] : boolean;
}

여기서 keyof Hero = 'name' | 'skill' 같다고 보면 됨

주의할점

type HeroNames = 'capt' | 'hulk' | 'thor';
type HEroAttendance ={
 [Name in HeroNAmes] : boolean; 
}

// 여기서 in 앞에 있는 Name은 개발자 마음대로 지을 수 있음
// 단 최대한 역할을 나타낼 수 있는 것으로 지어야함

interfac Hero{
 name:string;
 skill:string;
  
}

type HeroPropCheck = {
  [H in keyof Hero] : boolean;   
}

//타입 별칭으로 맵드 타입을 생성가능
type Hero ={
 name: string;
 skill:string;
}
type HeroPropCheck = {
  [H in keyof Hero] : boolean;   
}

string 타입에 맵드 타입 문법을 적용하여 새로운 타입 생성 가능

type UserName = string;
type AddressBook= {
 [U in UserName]: number;
}


var heroAddress: AddressBook={
 capt:12341234,
 hulk:928308
}
// AddressBook 타입으로 정의된 객체의 속성 키에는 어떤 문자열이든 
// 들어갈 수 있고 속성 값만 number 타입이 되면 됩니다.

다음과 같은 경우에는 맵드 타입 사용 불가 X

type Login = boolean;
type LoginAuth ={
 [L in Login]:string; 
}

// 객체의 속성이름은(key) 문자, 숫자 등으로 선언이 가능하지만
// true false와 같은 boolean 타입으로는 선언이 불가능하기 
// 때문에 에러가 발생합니다.

퀴즈

1

interface Hero{
 name: string;
 skill: string;
}
type HeroNames1 = keyof Hero;
type HeroNames2 = 'name' | 'skill';

여기서 HeroNames1와 HeroNames2는 같은 타입일까요
다른 타입일까요?

2

타입 별칭으로 맵드타입이 생성이 가능할까요? -> O / X

3

해당 코드의 타입을 string 에서 boolean으로 수정해주세요.

interface Hero{
 name:string;
 skill:string;
}

type HeroTypeChange ={
 A --- [  ] : OOOOOOO;  
}

여기서 A부분의 [] 와 OOOOOOO에 들어갈 코드를 적어주시면 됩니다.

정답

1. 같은 타입임

type HeroPropCheck = {
 [H in keyof Hero] : boolean;
}

type HeroPropCheck={
 [H in 'name' | 'skill'] : boolean;
}

2. 타입 별칭으로 맵드타입이 생성이가능

interface Hero{
 name:string;
 skill:string;
}

type HeroTypeChange ={
A ---- [ H (아무거나 적어도 상관 없음) in keyof Hero  ] : boolean;  
}