💻 Frontend

TypeScript 유틸리티 타입이란?

category
💻 Frontend
정의1. Partial<Type>2. Pick<Type, Keys>3. Omit<Type, Keys>4. Required<Type>Reference
 
TypeScript exercises를 풀다가 유틸리티 타입이 잘 기억이 나지 않아 제대로 정리해보려 한다.

정의

유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다. 유틸리티는 새로운 타입을 생성하지 않고 기존 타입에서 변환할 수 있기 때문에 코드가 간결해진다는 장점이 있다.
 

1. Partial<Type>

파셜 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다.
interface Address {
  email: string;
  address: string;
}

type MayHaveEmail = Partial<Address>;
MayHaveEmail은 Address 타입의 모든 하위 타입 집합을 나타내는 타입을 반환합니다. 아래 예제를 봐보자.
const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: "test@abc.com" }; // 가능
const all: MayHaveEmail = { email: "capt@hero.com", address: "Pangyo" }; // 가능
 

2. Pick<Type, Keys>

픽 타입은 특정 타입에서 몇 개의 속성을 선택하여 타입을 정의할 수 있다.
interface Hero {
  name: string;
  skill: string;
}
const human: Pick<Hero, "name"> = {
  name: "스킬이 없는 사람",
};
Pick<Hero, "name">이 타입은 Hero 타입에서 name 속성만 선택(pick)했다.
type HasThen<T> = Pick<Promise<T>, "then" | "catch">;
let hasThen: HasThen<number> = Promise.resolve(4);
hasThen.th; // 위에서 'then'만 선택하면 'then'만 제공, 'catch' 선택하면 'catch만 제공'
 

3. Omit<Type, Keys>

오밋 타입은 특정 타입에서 지정된 속성만 제거한 타입을 정의할 수 있다. 픽 타입이랑 반대라고 생각하면 된다. (픽은 선택된 속성만 정의, 오밋은 선택된 속성만 제거)
interface AddressBook {
  name: string;
  phone: number;
  address: string;
  company: string;
}
const phoneBook: Omit<AddressBook, "address"> = {
  name: "재택근무",
  phone: 12342223333,
  company: "내 방",
};
const chingtao: Omit<AddressBook, "address" | "company"> = {
  name: "중국집",
  phone: 44455557777,
};
Omit<AddressBook, "address" | "company">이 타입은 AddressBook에서 address, company 속성을 제거한 것이다.
 

4. Required<Type>

interface Props {
  a?: number;
  b?: string;
}

const obj: Props = { a: 5 };

const obj2: Required<Props> = { a: 5 };

// Property 'b' is missing in type '{ a: number; }' but required in type 'Required<Props>'.
Required<Props>이 타입은 Props 타입에서 a와 b가 optional로 되어있지만 Required, 즉 필수 속성으로 설정된 것이다.
 

Reference

유틸리티 타입 | 타입스크립트 핸드북
타입스크립트를 가장 쉽고 빠르게 배우는 방법
유틸리티 타입 | 타입스크립트 핸드북
https://joshua1988.github.io/ts/usage/utility.html
Documentation - Utility Types
TypeScript는 일반적인 타입 변환을 쉽게 하기 위해서 몇 가지 유틸리티 타입을 제공합니다. 이러한 유틸리티는 전역으로 사용 가능합니다. Type 집합의 모든 프로퍼티를 선택적으로 타입을 생성합니다. 이 유틸리티는 주어진 타입의 모든 하위 타입 집합을 나타내는 타입을 반환합니다. Type 집합의 모든 프로퍼티를 필수로 설정한 타입을 생성합니다. 의 반대입니다.
Documentation - Utility Types
https://www.typescriptlang.org/ko/docs/handbook/utility-types.html
Documentation - Utility Types