DEVLOG|개발 블로그

타입스크립트 유틸리티 타입과 타입 챌린지로 실력 올리기

March 28, 2021 7:12 PM:typescript

유틸리티 타입

타입스크립트에서 기본적으로 제공하는 유용한 유틸리티 타입들이 있다. 그 중 사용 빈도 수가 높으며 개인적인 생각으로 많이 쓰일 것 같은 유틸리티 타입 몇 개를 여기에 정리하고 사용해본다.

Partial

시그니처는 Partial<T>이다. 제네릭 타입으로 온 T에 대한 모든 키값을 선택적으로 만든다.

type Person = {
  name: string
  age: number
  job: string
}

type PartialPerson = Partial<Person>
// type PartialPerson = {
//   name?: string
//   age?: number
//   job?: string
// }

const person: PartialPerson = {
  name: 'Lee'
}

console.log(person)
// { name: 'Lee' }

매우 자주 쓰이는 유틸리티 타입 중 하나라고 생각한다.

Readonly

시그니처는 Readonly<T>이다. 제네릭 타입으로 온 T에 대한 모든 키값을 readonly로 설정한 타입을 반환한다.

const noModifyPerson: Readonly<Person> = {
  name: 'Lee',
  age: 25,
  job: 'Developer'
}

// 아래 라인은 실행될 수 없다.
noModifyPerson.name = 'Kim'

갖고있는 타입에서 수정 불가능한 타입을 만들어야 할 때 유용하게 사용될 수 있다.

Record

시그니처는 Record<T, K>로 작성되며 TK의 키들을 매핑시킨다.

type ScoreOnlyMaxAndMin = {
  min: number
  max: number
}

type Subject = 'english' | 'math' | 'science'

const mySubjectScore: Record<Subject, ScoreOnlyMaxAndMin> = {
  english: {
    max: 100,
    min: 65
  },
  math: {
    max: 90,
    min: 20
  },
  science: {
    max: 80,
    min: 50
  }
}

Subject 타입은 각각 english, math, science 프로퍼티를 가지며 각 프로퍼티에 ScoreOnlyMaxAndMin 타입을 매핑시키므로 Subject 타입의 프로퍼티는 모두 maxmin 프로퍼티를 가진다.

Pick

시그니처는 Pick<T, K>이며 T에서 K를 선택해 새로운 타입을 구성한다.

type Product = {
  name: string
  price: number
  image: string
  seller: number
  shelfLife: number
}

type ProductPreview = Pick<Product, 'name' | 'price'>

const productPreview: ProductPreview = {
  name: 'apple',
  price: 25000
}

타입 T에서 고르고 싶은 것만 골라 새로운 타입을 만들어낼 수 있는 점이 유용하고, 아주 많이 사용된다.

유틸리티 타입은 공식 홈페이지에 문서화가 잘 되어있어 한 눈에 알아보기 편하다. 직접 플레이그라운드에서 실행해볼 수도 있다.

타입 챌린지

위에 나와있는 유틸리티 타입을 직접 정의해서 문제를 풀어볼 수 있는 좋은 오픈 소스 프로젝트가 있어서 여기에 정리한다. Github에서 리드미에 모든 문제에 대한 내용이 적혀져 있고 해당 저장소 이슈에 자신이 정의한 타입을 올려 피드백을 받거나 다른 사람이 어떻게 정의했는지 참고할 수 있는 저장소다.

수록된 문제들을 풀다보면 유연한 타입을 어떻게 정의해야 하는지, 창의적인 방법이 떠오를 수 있다.