TypeScript 유틸리티 타입

IT공부중·2021년 2월 9일
0

TypeScript

목록 보기
9/9
post-custom-banner

타입스크립트에서 제공하는 기본 유틸리티타입이 몇가지 있다. 유틸리티 타입은 이미 정의 해놓은 타입을 변환할 때 사용하기 좋다. 그 중에 간단하게 Pick, Partial, Omit을 알아보았다.

Pick은 특정 타입에서 몇 개의 속성을 선택하여 타입을 정의 할 수 있다.

interface Animal {
  name: string;
  age: number;
  eyes: number;
}

type AnimalName= Pick<Animal, 'name'>; // {name: string}인 type을 정의함. 여러 개를  하기 위해서는 | 로 연결.

const nameOnly: AnimalName = {
  name: '문건우'
};

Omit은 특정 타입에서 몇 개의 속성을 뺄 수 있다.

type omitNameAge  = Omit<Animal, 'name' | 'age'>; // {eyes: number} 만 남게 된다.

const eyesOnly: omitNameAge  = {
  eyes: 2
}

Partial 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다.

type AnimalSubset = Partial<Animal>; 
// {name?: string;, age?: number, eyes?: number} 가 만들어진다.

const allAnimal: AnimalSubset = {
  name: '문건우',
  age: 25
}

이러한 유틸리티 타입은 우리가 만들 수 있다.

간단하게 Partial 타입을 만들어본다.

Partial Type을 보면

type Partial<T> = {
	[P in keyof T]?: T[P];
}; 

이런식으로 구현이 되어있다. 이거는 처음 볼 때 매우 혼란스러울 수 있다. 나 또한 그랬다.

이러한 타입은 maaped 타입이라고 한다. maaped 타입은 기존에 정의되어 있는 타입을 새로운 타입으로 변환해준다.

Partial의 generic 부분에 Animal을 넣어줬을 때 keyof T'name' | 'age' | 'eyes' 가 된다. 저 key들을 대상으로 반복문을 도는 것이라고 생각하면 된다. for ~ in 문을 생각하면된다. T[P] 이기 때문에 Animal.name 인 string, Animal.age인 number, Animal.eyes인 number가 된다. 즉, 저 코드의 결과로 반복문을 돌며

{name?: string;, age?: number, eyes?: number} 가 만들어진다.

아직 사용이 익숙하지 않지만 계속 사용하다보면 늘 것이라고 생각한다.

profile
4년차 프론트엔드 개발자 문건우입니다.
post-custom-banner

0개의 댓글