[TIL] TypeScript 파고들기(3): 유틸리티 타입

유틸리티 타입

• 유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다.
• 유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있다.

---

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

1) Partial<T>

• 파셜(Partial) 타입은 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다.
• 타입 내부에 없는 조건만 아니면 타입사용이 가능하며 모두 만족해도 상관없다.

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

type MayHaveEmail = Partial<Address>;
const me: MayHaveEmail = {}; // 가능
const you: MayHaveEmail = { email: 'test@abc.com' }; // 가능
const all: MayHaveEmail = { email: 'capt@hero.com', address: 'Pangyo' }; // 가능

2) Required<T>

• Partial 타입과는 반대로 Required<T> 타입은 타입 T의 모든 속성을 필수적으로 만든다.
• 즉, T 타입 객체에 정의된 모든 속성이 반드시 전부 제공이 되는 객체를 생성해야 할 때 쓰인다.

interface Person {
  name: string;
  age: number;
  address?: string; // 속성명 뒤에 붙는 "?"는 선택적 속성을 의미한다. 
}

type RequiredPerson = Required<Person>; // 이렇게 사용하면 address는 필수 조건이 된다.

3) Readonly<T>

• 이름부터 역할이 유추되는 Readonly<T> 타입은 타입 T의 모든 속성을 읽기 전용(read-only)으로 만든다.
• 이를 통해 readonly 타입의 속성들로 구성된 객체가 아니어도 완전한 불변 객체로 취급할 수 있다.

interface DatabaseConfig {
  host: string;
  readonly port: number; // 인터페이스 내부에서도 readonly 타입 사용 가능하다.
}

const mutableConfig: DatabaseConfig = {
  host: "localhost",
  port: 3306,
};

const immutableConfig: Readonly<DatabaseConfig> = {
  host: "localhost",
  port: 3306,
};

mutableConfig.host = "somewhere";
immutableConfig.host = "somewhere"; // 타입이 Readonly로 지정되어 변경이 불가능.

4) Pick<T, K>

• Pick<T, K> 유틸리티 타입은 타입 T에서 K 속성들만 선택하여 새로운 타입을 만든다.
• 이를 통해 타입의 일부 속성만을 포함하는 객체를 쉽게 생성할 수 있다.

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

const human: Pick<Hero, 'name'> = {
  name: '스킬이 없는 사람', // 한가지만 픽해서 타입 지정
};

---

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

type SubsetPerson = Pick<Person, "name" | "age">;

const person: SubsetPerson = { name: "Nick", age: 30 };

5) Omit<T>

• Omit<T, K> 유틸리티 타입은 타입 T에서 K 속성들만 제외한 새로운 타입을 만든다.
• Pick<T, K> 유틸리티 타입과는 반대의 동작.
• 이를 통해 기존 타입에서 특정 속성을 제거한 새로운 타입을 쉽게 생성할 수 있다.
• Omit이 굳이 있는 이유는 많은 속성을 포함시키는 것보다 특정 속성만 제거해서 사용하는 것이 편할 때도 있기 때문이다.

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
}

---

여기까지 기본적인 유틸리티 타입에 대해 정리해보았다.
아래 링크에서 더 많은 유틸리티 타입을 확인할 수 있다.
https://typescript-kr.github.io/pages/utility-types.html