타입스크립트 타입 조작 - 맵드 타입 / 템플릿 리터럴 타입

맵드 타입

📌기존의 객체 타입을 기반으로 새로운 객체 타입을 만든다.

interface Animal {
    type:string;
    name:string;
    age:number;
    color:string;
}

 

동물의 정보를 Animal 타입과 같이 저장해놓는다.

그리고 동물의 정보를 수정 가능한 함수가 있다면

function UpdateAnimal(animal:Animal){
 ...내부함수 }

UpdateAnimal( {color:"점박이"} )

 

이와같이 내가 color만 변경하고 싶다고 해서 color 프로퍼티만 함수에 넣을 수는 없다.

이미 이 함수의 매개변수 타입은 Animal 타입으로 정해져있기때문이다.

여기에 수정하고 싶은 프로퍼티만 골라담을 수 있는 타입이 하나 더 필요하다.

type AnimalModi = {
    typename?:string;
    name?:string;
    age?:number;
    color?:string;
}

 

새롭게 생긴 AnimalModi 타입은 모든 프로퍼티가 선택적이기때문에 원하는 프로퍼티만 골라 쓸 수 있다. 

 

 

여기서 중복되는 코드를 피하기 위해 간단하게 맵드타입을 사용할 수 있다.

Map 함수는 배열에서 요소를 하나씩 꺼내 콜백함수를 적용한 뒤 다시 배열을 뱉어내는 역할인데 이와 비슷하다.

 

맵드타입은 interface에서는 사용 X

type AnimalModi = {

    [key in " type " | " name " | "age" | "color"]?: Animal[key]

}

 

key가 type,name,age,color 를 한 번씩 돌면서 그 역할을 한다.

여기서 key 말고 k,i,value 등 변수의 이름은 다양하게 설정할 수 있다.

우측은 인덱스드 엑세스 타입, 즉 프로퍼티의 타입을 추출해준다.

그런데 이 코드 역시 원본타입인 Animal이 수정or삭제or추가 등 변동사항이 있다면 일일히 찾아다니면서 수정해야하는 번거로움이 있다.

 

또 줄여보자면 

type AnimalModi = {

    [key in keyof Animal]?: Animal[key]

}

 

keyof 연산자를 이용해 Animal 타입의 프로퍼티 키의 스트링 리터럴타입에 각각 한번씩 접근할 수 있도록 해준다.

 

 

➕이런식으로 모든 프로퍼티 타입을 불리언으로 바꿀 수도 있다.

type AnimalModi = {

    [key in " type " | " name " | "age" | "color"]?: boolean;

}

 

---

템플릿 리터럴 타입

📌특정 패턴을 만드는 string 타입을 만드는 것

 

type Main = "빵" | "떡" | "밥"

type Sub = "면" | "국" | "음료"


type Dinner = `빵-면` | `빵-국` |  `빵-음료` ...

 

가짓수가 많을수록 경우의 수도 늘어난다.

 

이를 한 줄로 정리하는 템플릿 리터럴 타입은

 

type Dinner = `${Main} - ${Sub}`

 

 

끝