코딩애플 Typescript - object 타입 변환기 만들기

김원종·2024년 5월 30일
0

TypeScript 학습

목록 보기
27/28

타입을 프로그래밍스럽게 만들수 있다.

가끔 object를 다른 타입으로 변환하고 싶을 때가 있다.
모든 속성들에 문자가 들어오는 타입을 갑자기 숫자가 들어오도록 바꾸고 싶을때 말이다 그럴 땐 처음부터 타입을 다시 작성하는 것이 아니라 mapping을 이용하면 된다.

keyof 연산자




지난 시간 배운 indexsignature에도 사용이 가능하다.

키값들을 전부다 출력해보고 싶을때 Object.keys라고 사용하고 원하는 object이름을 넣어주면 위처럼 출력된다. keyof는 object 타입에 사용하면 object 타입이 가지고 있는 모든 key값을 union type 으로 합쳐서 내보내준다. object의 key를 뽑아서 새로운 타입을 만들고 싶을 때 사용하는 연산자이다.


keyof연산자를 알면 다른것도 이해할수있다. 만약 Car라는 타입을 생성해 두었는데 타입을 잘못 지정했다고 해보자. 안에있는 boolean타입을 string으로 변경해야하는데 일일이 하나씩 변경하기엔 안에 속성이 많을수록 번거롭고 오래걸린다.
그럴때 타입변환기같은것을 하나 생성해서 안에 타입들을 바꿔주면 된다. keyof를 사용해서 말이다.
왜 이렇게 될수있나?

key in keyof MyType을 이해해야한다.지금 파라미터로 MyType을 입력할수있는데 Car를 넣어주면 Car타입이 파라미터로 들어갈것이다. 그래서 object를 입력하면 keyof연산자를 붙여달라고 코드가 구성되어있고 오른쪽에 있는 자료의 key값을 모두 뽑아서 union타입으로 만들어 달라는 뜻이된다. 그래서 왼쪽에 있는 key값이 오른쪽에있는 union타입에 있으면 string으로 만들어달라는 뜻이된다.

이런 역할을 해주기 때문에 TypeChanger이라는 타입은 타입을 변경해주는 즉 맵핑 해주는함수 라고 생각하면 된다. 맵핑은 A에서 B로 변환해주세요 라고 간단하게 생각하면 된다.

TypeChanger를 만들때 타입 파라미터를 하나 입력할수있게 구성하면 오브젝트 타입안에서 해당 파라미터를 사용할수있다.


숙제1) 다음 타입을 변환기 돌려보십시오.

type Bus = {
color : string,
model : boolean,
price : number
}
동료가 잘못 만든 타입입니다.

color, model, price 속성은 전부 string 또는 number 타입이어야합니다.

  1. 변환기 하나 만드시고

  2. 기존 Bus 타입을 변환기 돌려서 위 조건을 충족하는 새로운 타입을 하나 만들어보십시오.

나의 답안

type Bus = {
    color : string,
    model : boolean,
    price : number
}

type Changer<A> ={
    [key in keyof A] : string|number
}

type Ne2w = Changer<Bus>;

센세 답안

type Bus = {
  color : string,
  model : boolean,
  price : number
}

type TypeChanger <MyType> = {
  [key in keyof MyType]: string|number;
};

type NewBus = TypeChanger<Bus>
이제 NewBus는 이제 color, model, price를 가지고 있으며 

모든 속성은 string | number 타입입니다. 

 

숙제2) 이런 변환기는 어떻게 만들어야할까요?

object안에 들어있는 모든 속성을

string, number 이렇게 고정된 타입으로 변환해주는게 아니라

내가 원하는 타입을 입력하면 그걸로 변환해주는 범용성 좋은 변환기를 만들어보십시오.

나의 답안

type Bus = {
    color : string,
    model : boolean,
    price : number
}

type Changer<A,B> ={
    [key in keyof A] : B
}

type Ne2w = Changer<string>;

센세 답안

type Bus = {
  color : string,
  model : boolean,
  price : number
}

type TypeChanger <MyType, T> = {
  [key in keyof MyType]: T;
};

type NewBus = TypeChanger<Bus, boolean>;
type NewBus2 = TypeChanger<Bus, string[]>
이러면 TypeChanger 쓸 때마다 타입파라미터를 T 자리에 하나 더 입력할 수 있게 됩니다.

그러면 이제 오브젝트 모든 속성은 T로 바뀜

 

NewBus 살펴보시면 모든 속성이 boolean으로 바뀌어있습니다.

NewBus2 살펴보시면 모든 속성이 string[] 으로 바뀌어있습니다.
profile
개린이

0개의 댓글