TypeScript - type mapping

TypeScript 대표이미지

 

Type mapping

특정한 타입을 다른 타입으로 변환하는 과정을 의마한다. 이를 통해 코드의 유지보수성을 높이고 가독성을 향상시킬 수 있다. 주로 제네릭(Generic)과 함께 사용되며, 주로 유연한 코드 작성이 요구되는 상황에서 활용된다.

 

keyof 연산자

keyof는 object 타입에 사용하면 object 타입이 가지고 있는 모든 Key값을 union type으로 합쳐서 내보낸다.

interface Person {
  age: number;
  name: string;
}
type PersonKeys = keyof Person;   //"age" | "name" 타입됩니다
let a :PersonKeys = 'age'; //가능
let b :PersonKeys = 'ageeee'; //불가능

 

person 타입은 age, name 이라는 key를 가지고 있기 때문에 personkey가 'age' | 'name' 타입이 된다.

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

 

person 타입은 모든 문자 key를 가질 수 있기 때문에 keyof person을 하면 string 타입이 된다.

 

Mapped Types

object안에 있는 속성들을 다른 타입으로 한번에 변환하고 싶을 때 타입변환기를 만들면된다.

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 타입파라미터] : 원하는 타입 이렇게 만들면 object 타입을 입력했을 때 속성명은 그대로지만 다른 타입으로 변환해주는 변환기를 만들 수 있다.

 

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',
}

 

만약 object 안에 들어있는 모든 속성을 string, number 처럼 고정된 타입으로 변환해주는게 아닌 원하는 타입을 입력하면 그걸로 변환해주는 범용성 좋은 변환기를 만들고 싶다면

 

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 자리에 입력할 수 있게 된다.