• 유틸리티 타입이란 제네릭, mapped type, conditional type 등의 기능을 이용해 실무에서 자주 사용되는 타입을 미리 만들어 놓은것을 말한다.

  • 따라서 직접 우리가 원하는 유틸리티 타입을 만들어보는 것도 가능하고, 이 방법도 알아볼 것이다.

• Utility Type의 종류는 많다. 그중에서도 가장 많이 쓰이는 9가지를 알아보자

  

  • Mapped Type 6가지와 Conditional Type 3가지를 다뤄볼 것이다.

  • 기타 다른 타입들은 아래 공식문서 참고.

    Documentation - Utility Types

10-1. Mapped Types 1 - Partial, Required, Readonly

Mapped Types에 대한 정의는 아래를 참고

8-4. 맵드 타입 Mapped Types

우선 아래와 같은 블로그 게시글 객체 타입을 정의하고 시작하자.

type Post = {
  title: string;
  tags: string[];
  content: string;
  thumbnailURL?: string;
}

• 물론 interface로 작성해도 무방하다.

Partial

/* Partial<T> */
type Partial<T> = {
  [key in keyof T]?: T[key];
};

const draft: Partial<Post> = {
  title: "title",
  content: "draft",
}

• Partial<T>의 경우, T에 해당하는 객체 타입의 모든 프로퍼티를 선택적(optional) 프로퍼티로 설정해주는 기능을 가지고 있다.
  • 따라서 draft의 경우 Partial<Post>로 정의했기 때문에 tags 값을 지정하지 않았음에도 에러가 발생하지 않는 모습이다. (thumbnailURL은 ?: 라서 원래부터 선택적 프로퍼티고)
• 그리고 Partial<T>를 직접 구현하는 방법도 위 코드에 나와있다.
  • T객체 타입의 모든 프로퍼티([key in keyof T])와 각각의 타입(T[key])을 불러와서 선택적 타입으로(?:) 설정해주는 모습이다. (제네릭의 여러 문법들을 활용해서 구현하는 모습이다)

Required

/* Required<T> */

type Required<T> = {
  [key in keyof T]-?: T[key];
}

const withTumbnailPost: Required<Post> = {
  title: "one bite TS review",
  tags: ["TS", "Front-end"],
  content: "content",
  thumbnailURL: "https://...",
}

• Required의 경우 Partial과 반대로 모든 프로퍼티를 필수 프로퍼티로 설정해준다.
• 기존 Post 타입에서 thumbnailURL의 경우 optional로 정의되어 있지만, Required 타입으로 정의하게 되면 thumbnailURL도 필수 타입이 된다. (포함하지 않을 경우 에러 발생)
• 마찬가지로 직접 구현할 수 있는데, -?: 를 통해서 optional을 의미하는 ?를 제거(-)하여 필수로 만든다는 의미로 이해하면 될듯 하다.