Into the Typescript 3

고급타입

---

유틸리티 타입

유틸리티 타입은 이미 정의해 놓은 타입을 조금 수정하여 사용할 때 좋은 타입 문법이다. 유틸리티 타입을 쓰면 더 간결한 문법으로 타입을 정의할 수 있다.

• partial
  특정 타입의 부분집합만 타입으로 쓰고 싶은경우 사용한다.

interface Address {
  email: string;
  address: string;
}

type MayHaveEmail = Partial<Address>;
const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: 'test@abc.com' }; // 가능

partial을 쓰지 않는다면 다음과 같이 optinal 인자를 사용하여 코드 중복을 초래한다.

interface UpdateProduct {
  id?: number;
  name?: string;
  price?: number;
  brand?: string;
}

• pick
  타입의 몇개의 속성만 타입으로 쓰고 싶은경우 사용한다.

interface Beverage{
  name: string;
  price: number;
}

const gatorade : Pick<Beverage, 'name'> = {
  name : 'gatorade',
}

• 내부 동작방식
  

Partial 타입을 자세히 보면 위의 주석에도 나와있듯이, 모든 properties에 옵셔널을 적용하여 주는 것이다.

• Omit
  pick과 반대로 몇개의 타입을 빼고 싶은경우 사용한다.

interface Device {
  name: string;
  company : string;
  price : number;
  place: string;
}
const samsung: Omit<Device, 'place'|'price'> = {
  name: '갤럭시S20',
  company: '삼성'
}

---

맵드타입(Mapped Type)

자바스크립트의 map함수와 비슷한 원리로 타입에 mapping을 적용해 타입을 바꾸는 방식이다.

• 기본 형식
  아래와 같은 형식으로 맵드타입을 작성해야 한다.

{ [ P in K ] : T }
{ [ P in K ] ? : T }
{ readonly [ P in K ] : T }
{ readonly [ P in K ] ? : T }

키값마다 숫자를 넣은 객체를 생성하고 싶다면 다음과 같이 작성할 수 있다.

type stocks = 'APPL'|'TSLA'|'MSFT';
type StockPrice = {[K in stocks]: number};
const PriceInfo : StockPrice = {
  'APPL': 119,
  'TSLA': 654,
  'MSFT': 230,
}

---