정중식의 개발공부로그

오브젝트 타입 변환기

26 Apr 2023 | typeScript

코딩애플강의를 보고 정리했습니다.

keyof 연산자

object의 key를 뽑아서 새로운 타입을 만들고 싶을 때 사용하는 연산자이다.
object 타입에 사용하면object 타입이 가지고 있는 모든 key 값을 union type으로 합쳐서 내보내준다.

유니온타입은 number|string 이런식의 타입을 뜻한다.

Ex)

interface Person {
  age: number;
  name: string;
}

type PersonKeys = keyof Person;   //"age" | "name" 타입이 된다.

let a :PersonKeys = 'age'; //가능
let b :PersonKeys = 'ageeee'; //불가능

Person 타입은 age, name이라는 key를 갖고 있어서,
PersonKeys는 ‘age’|’name’이라는 리터널 타입이 된다.

나아가서, 이런식으로 코드를 짤 수 있다.

interface Person {
  [key :string]: number;
}
type PersonKeys = keyof Person;   //string | number 타입이 된다.
let a :PersonKeys = 'age'; //가능
let b :PersonKeys = 'ageeee'; //가능

Mapped Types

오브젝트 안에 있는 속성들을 다른 타입으로 한번에 모두 변환할때 유용하다.

type Car = {
  color: boolean,
  model: boolean,
  price: boolean | number,
};

위의 타입에 명시된 모든 속성들을 string 타입으로 바꾸고 싶을때 이런식으로 해주면 된다.

type Car = {
  color: boolean,
  model : boolean,
  price : boolean | number,
};

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

여기서 in 키워드는 왼쪽이 오른쪽에 들어있냐라는 뜻이고,
keyof는 오브젝트 타입에서 key값만 유니온타입으로 뽑아주는 역할이다.

type Car = {
  color: boolean,
  model : boolean,
  price : boolean | number,
};

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

type 새로운타입 = TypeChanger<Car>;

let obj :새로운타입 = {
  color: 'red',
  model : 'kia',
  price : '300',
}

이렇게 하면 새로운타입은 color,model,price 속성을 갖고있고, 전부 string 타입이 된다.

Related Posts