[TypeScript] 대표적인 유틸리티 타입을 알아보자!

짱 유용한 Utility Types를 알아보자!

 

유틸리티 타입(Utility Types)은 하나의 type을 다양하게 변형하여 새로운 타입을 생성하는 것이다.

그 중 가장 대표적인 유틸리티 타입들을 알아보자.

 

1. Index Type

기존 타입의 key 또는 value에 접근하여 타입을 생성한다.

아래는 age와 gender 요소를 갖는 Animal 타입을 활용하여 다른 타입을 생성하는 예시이다.

type Animal = {
  age: number;
  gender: 'male' | 'female';
};

type Age = Animal['age'];		// number

type Keys = keyof Animal;		// 'age' | 'gender'

type Person = {
  name: string;
  age: number;
  gender: Animal['gender'];		// 'male' | 'famale'
}

---

2. Partial Type

기존 타입의 요소들을 모두 옵셔널로 바꿔서 새로운 타입을 생성한다.

아래는 할 일을 담는 Todo 타입에 Partial Type을 적용한 예시이다.

type Todo = {
  title: string;
  desc: string;
  priority: 'high' | 'low';
}

type TodoOptional = Partial<Todo>;

 

결과적으로 TodoOptional은 아래와 같이 정의된다.

{
  title?: string;
  desc?: string;
  priority?: 'high' | 'low';
}

 

Partial Type은 아래와 같이 활용될 수 있다.

const updateTodo = (todo: Todo, fieldsToUpdate: Partial<Todo>): Todo {
  return { ...todo, ...fieldsToUpdate };
}

const todo: Todo = {
  title: 'study TypeScript',
  desc: 'study hard',
  priority: 'high',
};

const todo2 = updateTodo(todo, { priority: 'low' });	// 두 번째 인자는 Partial<Todo> 타입을 따른다.

---

3. Readonly Type

기존 타입의 요소들을 모두 읽기전용 (수정불가) 상태로 바꾼 새 타입을 생성한다.

위의 Todo 타입에 Readonly Type을 적용한 예시이다.

const displayTodo = (todo: Readonly<Todo>): void => {
  todo.title = 'hello';		// error
}

---

4. Pick Type과 Omit Type

Pick Type은 기존 타입의 몇몇 요소만 골라서 새로운 타입을 생성한다.

Omit Type은 기존 타입의 몇몇 요소만 제외하고 나머지 요소들로 새로운 타입을 생성한다.

아래는 여러 정보를 갖는 Video 타입으로부터 VideoMetadata라는 새로운 타입을 생성하는 예시이다.

type Video = {
  id: string;
  title: string;
  url: string;
  data: string;
}

type VideoMetadata1 = Pick<Video, 'id'|'title' >;
type VideoMetadata2 = Omit<Video, 'url'|'data' >;

결과적으로 VideoMetadata1과 2는 같은 타입이다.