[TypeScript] 유틸리티 타입

이 글은 인프런의 실전 프로젝트로 배우는 TypeScript 강의를 듣고 정리한 글입니다.

유틸리티 타입은, 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다. 유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있다.

1. Partial

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

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

type MayHaveEmail = Partial<Address>;
const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: 'iamsangminpark@gmail.com' }; // 가능
const all: MayHaveEmail = { email: 'iamsangminpark@gmail.com', address: 'Seoul' }; // 가능

접근하고자 하는 타입들을 더 쉽게 사용할 수 있게 된다. Address 인터페이스를 부분적으로 사용하겠다 라고 생각하면 될 것 같다.

js의 map을 생각해보면 될 것 같다.

2. Pick

Pick 타입은, 같은 속성이 들어가는 여러개의 인터페이스를 만듦으로써 발생하는 비효율성을 해결하기 위한 유틸리티 타입이다.

interface Product {
  id: number;
  name: string;
  price: number;
  brand: string;
  stock: number;
  something: object;
}

// interface ProductDetail {
//   id: number;
//   name: string;
//   price: number;
// }

type ShoppingItem = Pick<Product, "id" | "name" | "price">;

// 아이템 클릭 시 상세 정보를 나타내는 함수
function displayProductDetail(shoppingItem: ShoppingItem) {
  // ..
}

위의 예시 코드를 보자. displayProductDetail 함수에는 원래 (주석처리 되어있는) ProductDetail 인터페이스를 활용하고자 했다. 근데 보면, 이 ProductDetail 인터페이스는 Product 인터페이스의 내부 속성들의 일부에 해당한다. 이런 경우에는, 굳이 id, name, price를 중복해서 적어서 효율성을 낮출 필요가 없다.

type ShoppingItem = Pick<대상 인터페이스, 'property1' | 'property2' | ... >;

이러한 형태로 사용한다. 쉽게 생각하면, 인터페이스에서 특정 속성들을 따로 뽑아서 가져온다음 그것에 대해 type 선언을 한다고 보면 된다. 이제 이 ShoppingItem 타입을 파라미터에 typing해서 사용하면 된다.

3. Omit

Omit 타입은, 특정 타입에서 지정된 속성만 제거한 타입을 정의해 준다. Pick의 반대라고 생각하면 된다.

interface AddressBook {
  name: string;
  phone: number;
  address: string;
  company: string;
}
const phoneBook: Omit<AddressBook, 'address'> = {
  name: '상민',
  phone: 10230201,
  company: '우리 집'
}

Pick과 같이, <대상 인터페이스, 'property1' | 'property2' | ... >; 의 형태를 띤다.