유틸리티 타입 - Partial, Required, Pick 사용하기

타입스크립트에는 원시 타입 외에도 타입을 조작할 수 있는 유틸리티 타입이 존재합니다.

오늘은 여러 유틸리티 타입 중 Partial, Required, Pick이라는 타입을 사용해 보겠습니다.

type userType = {
  id: number;
  email: string;
  password: string;
  firstname: string;
  lastname: string;
};

여기 이름, 비밀번호, 이메일, 고유번호로 구성된 타입이 있습니다.

하지만 어떤 컴포넌트에서는 비밀번호가 필요하지 않을 수도 있고, 또다른 컴포넌트에서는 이메일이 필요하지 않을 수도 있습니다.

type userType = {
  id?: number;
  email?: string;
  password?: string;
  firstname?: string;
  lastname?: string;
};

물론 이렇게 모든 속성을 옵셔널로 지정하면 원하는 속성만 포함된 타입을 사용할 수 있지만, 이러면 타입 검사가 느슨해짐으로써 결국 타입스크립트를 사용하는 의미가 퇴색되게 됩니다.

type userType = {
  id: number;
  email: string;
  password: string;
  firstname: string;
  lastname: string;
};

type withoutPasswordUserType = {
  id: number;
  email: string;
  firstname: string;
  lastname: string;
}

type withoutEmailUserType = {
  id: number;
  password: string;
  firstname: string;
  lastname: string;
}

그러면 이렇게 원하는 요소들만 포함된 커스텀 타입을 필요할 때마다 만들어야만 할까요?

만약 속성이 10개, 20개 이런 식으로 많아지면 어떻게 할까요?

 

어쩌다보니 서론이 길어졌는데, 바로 이럴 때 유틸리티 타입을 활용할 수 있습니다.

유틸리티 타입 1 : Partial 타입 사용하기

type userType = {
  id: number;
  email: string;
  password: string;
  firstname: string;
  lastname: string;
};

맨 처음 보았던 유저 타입입니다.

Partial 유틸리티 타입을 활용하면, 모든 요소를 옵셔널로 지정한 타입을 새로 생성할 수 있습니다.

type userType = {
  id: number;
  email: string;
  password: string;
  firstname: string;
  lastname: string;
};

// Partial은 인자 타입의 모든 속성을 옵셔널로 변경한 타입입니다.
const user: Partial<userType> = {
  id: "kimchanmin1";
  // password: "12345",
  email: "kimchanmin1@gmail.com";
  firstname: "찬민";
  lastname: "김";
}

유틸리티 타입 2 : Pick 타입 사용하기

pick 타입은 특정 요소만 포함된 타입을 생성합니다.

type userType = {
  id: number;
  email: string;
  password: string;
  firstname: string;
  lastname: string;
};

// Pick은 첫 번째 인자로 받은 타입 중, 두 번째 인자로 주어진 속성만을 포함한 타입을 리턴합니다.
const user: Pick<userType, "id" | "firstname" | "lastname"> = {
  id: "kimchanmin1";
  firstname: "찬민";
  lastname: "김";
}

유틸리티 타입 3 : Required 타입 사용하기

Required 타입은 Partial 타입처럼 모든 속성이 포함된 타입을 리턴하지만, 모든 속성을 필수로 요구합니다.

따라서 단독으로 사용할 기회는 많지 않을수도 있지만, Pick 등 다른 유틸리티 타입과 결합해 새로운 타입을 쉽게 생성할 수 있습니다.

const user = {id: 1, lastname: "김", firstname: "찬민"};

const user1: Required<Pick<userType, "id" | "lastname" | "firstname">> = user;

이처럼 타입스크립트에는 문자열, 숫자 등의 원시 자료형뿐만 아니라 기존 타입들을 가공하는 유틸리티 타입이라는 것이 존재함을 알 수 있었습니다.

 

오늘 다룬 Partial, Pick, Required 외에도 상황에 따라 사용할 수 있는 유틸리티 타입이 다양하니, 더 궁금하신 분들은 한번 공식 문서를 통해 확인해보시길 추천드리겠습니다. 😁

Documentation - Utility Types