TypeScript - 유틸리티타입

타입스크립트 핸드북 - 유틸리티 타입과 실전 프로젝트로 배우는 타입스크립트에서 배운 내용을 정리한 블로그 입니다.

유틸리티 타입은 정의해 놓은 타입을 가공해서 변환시키는 타입 문법이다.

"바퀴를 다시 발명하지 마라(Don't reinvent the wheel)"라는 말이 있듯이 유틸리티 타입을 사용하지 않고 제네릭과 인터페이스로도 변환할 수 있지만, 더욱 간편하게 사용할 수 있다.

• 마치 for loop를 이용해서 구현하는 대신 forEach reduce 등을 사용하는 것과 같은 느낌이다.

오늘은 유틸리티타입의 대표격인 삼형제를 정리해 보려고 한다.

• Pick
• Omit
• Partial

Pick

아래와 같이 사람에 대한 인터페이스가 있다.

interface PersonDetail {
  name: string;
  age: number;
  address: string;
  phoneNum: number;
  believer: boolean;
}

PersonDetail 인터페이스에서 개인정보를 보호하기위해 name과 age만 가지고 있는 타입을 정의하고 싶다고 생각해 보자.

interface Person {
  name: string;
  age: number;
}

위와 같이 interface를 재정의 하면 중복 코드들이 발생하게 된다.

이럴때 사용할 수 있는것이 Pick이다.

Pick의 사용방법은 간단하다 첫 번째는 어떤 인터페이스에서 가져올 것이냐, 두 번째는 어떤 key들을 가져올 것이냐 이다.

type Person = Pick<PersonDetail, 'name' | 'age'>

만약 name만 가지고 오고싶다면 아래처럼 사용해도 된다.

type Person = Pick<PersonDetail, 'name'>

Omit

Omit은 Pick의 반대라고 생각하면 된다. 어떤 key를 가져올 것이냐가 아니고 선택한 key 빼고 나머지를 가져온다.

Pick으로 believer를 제외한 나머지를 가져올려고 하면 다음과 같이 나머지를 전부 작성해야 해서 코드가 길어진다.

type PersonWithOutBeliever = Pick<PersonDetail, 'name' | 'age' | 'phoneNum' | 'address'>

Omit으로 재 작성하면 다음과 같다

type PersonWithOutBeliever = Omit<PersonDetail, 'believer'>

Partial

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

type Person = Partial<PersonDetail>

위와 같이 작성하면 아래와 같이 interface를 재정의 한 효과와 같다.

interface Person {
  name?: string;
  age?: number;
  address?: string;
  phoneNum?: number;
  believer?: boolean;
}