Blog - park

오늘은 타입스크립트 유틸리티 타입에 대해 알아보자.

많은 유틸리티 타입이 존재 하지만 개인적으로 가장 많이 접한 유틸리티 타입에 대해 정리해 보려고 한다.

Typescript Utility Types이란?
유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다.
유틸리티 타입을 사용하지 않더라도 기존의 문법으로 충분히 타입변환을 할 수 있지만 유틸리티 타입을 쓰면 더 간결한 문법으로 타입을 정의할 수 있다.

1. Partial<Type>

전달받은 Type의 모든 하위집합(부분집합)을 나타내는 타입을 가질 수 있다.

interface Todo {
  title: string
  description: string
}
 
const a: Todo = { title: '', description: '' }
// Error: "description"가 존재하지 않기 떄문에 에러 발생
const b: Todo = { title: '' }
 
// Todo의 하위집합 전부 넣을 수 있음. {} 포함
const c: Partial<Todo> = { title: '', description: '' }
const d: Partial<Todo> = { title: '' }
const e: Partial<Todo> = { description: '' }
const f: Partial<Todo> = {}

2. Required<Type>

전달받은 Type에 대해 모든 프로퍼티를 required로 바꿔준다.

Partial의 반대라고 생각하면 좋을거 같다.

interface Todo {
  title?: string
  description?: string
}
 
// OK: 모든프로퍼티가 Optional이기 때문에 description은 없어도 OK
const obj: Todo = { title: '' }
 
// Error: 프로퍼티를 required로 바꿨는데 description을 입력안함
const obj2: Required<Todo> = { title: '' }
 
// OK
const obj3: Required<Todo> = { title: '', description: '' }

3. Readonly<Type>

전달받은 Type의 프로퍼티를 readyonfy(읽기전용)으로 지정해주기 때문에 생성된 유형의 속성을 재할당 할 수 없다.

interface Todo {
  title: string
}
 
const todo: Readonly<Todo> = {
  title: 'Delete inactive users',
}
 
// Error: readonly프로퍼티에는 재할당 할 수 없다.
todo.title = 'Hello'

4. Record<Keys, Type>

키가 Key이고 값이 Type인 객체 타입을 생성한다.

이 유틸리티 타입은 한 유형의 속성을 다른 유형애 매핑하는데 사용할 수 있다.

interface CatInfo {
  age: number
  breed: string
}
 
type CatName = 'miffy' | 'boris' | 'mordred'
 
const cats: Record<CatName, CatInfo> = {
  miffy: { age: 10, breed: 'Persian' },
  boris: { age: 5, breed: 'Maine Coon' },
  mordred: { age: 16, breed: 'British Shorthair' },
}
 
// key가 CatName인 "miffy" | "boris" | "mordred"가되고
// value가 CatInfo타입으로 age랑 breed가 있는 객체이다.
cats.boris
 
// Error: "test"는 "miffy" | "boris" | "mordred"에 존재하지 않기 때문에 에러가 발생
cats.test

5. Pick<Type, Keys>

Pick 유틸리티 타입은 특정 Type 에서 몇 개의 속성(Keys)을 선택하여 타입을 재정의한다.

Omit 유틸리티 타입의 반대 개념으로 이해하면 좋을 거 같다.

interface Todo {
  title: string
  description: string
  completed: boolean
}
 
// Todo에서 "title" | "completed"속성만 가져와서 타입을 재정의 한다.
type TodoPreview = Pick<Todo, 'title' | 'completed'>
 
const todo: TodoPreview = {
  title: 'Clean room',
  completed: false,
}

6. Omit<Type, Keys>

Omit 유틸리티 타입은 특정 Type에서 몇 개의 속성(Keys)을 제거하여 타입을 재정의한다.

Pick 유틸리티 타입의 반대 개념으로 이해하면 좋을 거 같다.

interface Todo {
  title: string
  description: string
  completed: boolean
  createdAt: number
}
 
// Todo에서 "description"속성을 제거한 "title" | "completed" | "createdAt" 속성만을 가진다.
type TodoPreview = Omit<Todo, 'description'>
 
const todo: TodoPreview = {
  title: 'Clean room',
  completed: false,
  createdAt: 1615544252770,
}
 
// Todo에서 "completed"과 "createdAt" 속성을 제거한 "title" | "description" 속성만을 가진다.
type TodoInfo = Omit<Todo, 'completed' | 'createdAt'>
 
const todoInfo: TodoInfo = {
  title: 'Pick up kids',
  description: 'Kindergarten closes at 5pm',
}

참조

https://www.typescriptlang.org/docs/handbook/utility-types.html