[TypeScript] 타입스크립트 유틸리티 타입 - 보다 간결하게✨

🚀 유틸리티 타입이란 ?

유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법입니다. 예를 들어 Information이라는 인터페이스에서 일부 속성만 사용하고 싶다면, 일부만 있는 타입을 선언해서 사용하지 않아도 유틸리티 타입 한 줄로 보다 간결하게 사용할 수 있게 됩니다.

유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있습니다!

 

자주 사용되는 유틸리티 타입 알아보기

자주 사용되는 타입을 몇 개 알아봅시다 !

Partial

Partail 타입은 특정 타입의 일부만 사용하는 것을 허용하는 타입을 정의할 수 있습니다.

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

type MayHaveEmail = Partial<Address>;

const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: 'test@test.com' }; // 가능
const all: MayHaveEmail = { email: 'test@test.com', address: 'Seoul' }; // 가능

만약 Partial을 사용하지 않는다면 모든 속성에 optional을 붙여서 다시 선언하여 사용해야 했을 겁니다.

Pick

Pick은 특정 타입에서 몇 개의 속성만 골라서 타입을 정의할 수 있습니다.

interface Developer {
  name: string;
  skill: string;
}

const human: Pick<Developer, 'name'> = {
  name: '스킬이 없는 사람',
};

위와 같이 Pick<타입, 골라쓰고 싶은 타입> 으로 사용하여 일부 타입만 골라 사용할 수 있습니다. 만약 골라 사용하고 싶은 타입이 여러 개라면 유니온 타입으로 이어서 작성하면 되겠습니다.

type HasThen<T> = Pick<Promise<T>, 'then' | 'catch'>;
let hasThen: HasThen<number> = Promise.resolve(5);
hasThen.th // 위에서 'then'만 선택하면 'then'만 제공, 'catch' 선택하면 'catch'만 제공

Omit

Omit 타입은 특정 타입에서 원하는 속성을 뺀 타입을 정의해 줍니다. Pick과 반대되는 개념 정도로 이해해도 좋을 거 같습니다.

interface AddressBook {
  name: string;
  phone: string;
  address: string;
  company: string;
}
const phoneBook: Omit<AddressBook, 'address'> = {
  name: '재택근무',
  phone: '01011112222',
  company: '본인 집',
};
const restaurant: Omit<AddressBook, 'address' | 'company'> = {
  name: '레스토랑',
  phone: '01033334444',
};

 

더 많은 유틸리티 타입이 궁금하면 다음 공식 타입스트립트 페이지를 참고하면 좋겠습니다.

Documentation - Utility Types