[TypeScript] 타입스크립트의 고급 타입

이번에는 타입스크립트의 고급타입에 대해 알아보겠다.

유틸리티 타입

1. Partial

partial<T> 타입은 타입 T의 모든 속성을 선택적으로만든다.
이를 통해 기존 타입의 일부 속성만 제공하는 객체를 쉽게 생성할 수 있다.

ex)

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

const updatePerson = (person: Person, fields: Partial<Person>): Person => {
  return { ...person, ...fields };
};

const person: Person = { name: "gildong", age: 30 };
const changedPerson = updatePerson(person, { age: 31 });

위의 updatePerson 함수를 보면 2번 째 인자로 Partial<Person> 타입의 필드를 받고 있다.
이는 name하나 또는 age하나 또는 둘 다를 인자로 받을 수 있도록 유연하게 만들어준다.

2. Required

이는 위에서 다룬 Partial과는 반대로 타입 T의 모든 속성을 필수적으로 만든다.
타입 객체에 정의된 모든 속성이 반드시 전부 제공되는 객체를 생성할 때 사용한다.

예시를 보자

ex)

interface Person {
  name: string;
  age: number;
  address?: string; // 선택적 속성
}

...

type RequiredPerson = Required<Person>;

이렇게 타입을 선언하면 선택적 속성인 address 입력도 필수가 된다.

3. Readonly

이 타입은 모든 속성을 읽지 전용으로 만든다.
이를 통해 readonly 타입의 속성들로 구성된 객체가 아니어도 완전한 불변 객체로 취급할 수 있다.

ex)

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"; // 오류!

DatabaseConfig는 불변 객체가 아니지만(host가 readonly가 아니기 때문)
ReadOnly 타입으로 불변 객체로 만들 수 있다.

4. Pick

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

ex)

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

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

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

위에서 SybsetPerson은 Person이라는 인터페이스에서 name과 age 속성만 선택해서 구성된 새로운 타입이다.

5. Omit

Omit<T,K> 타입은 타입 T에서 K 속성들만 제외한 새로운 타입을 만든다.
Pick과는 반대의 동작을 한다고 생각하면 편하다.

ex)

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

type SubsetPerson = Omit<Person, "address">;

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

위의 SubsetPerson은 address 속성만 제외한 새로운 타입이다.

더 다양한 타입을 보고싶다면
https://www.typescriptlang.org/ko/docs/handbook/utility-types.html
여기서 참고하면 되겠다.