이미 생성한 타입에서 원하는 타입만 골라 새로운 타입을 만들어보자.
이미 생성한 타입를 재활용할 수 있는 방법을 찾아보다가 Omit에 대해 공부한 글을 작성했었고, 그 과정에서 반대개념인 Pick이 존재한다는 걸 알게되었다.
Omit에 이어 반대개념인 Pick에 대해서 알아보자.
Pick
선택하다,뽑다 라는 뜻을 가진 TypeScript의 Utility Types 중 하나로, 전엔 다뤘던 Omit에 반대되는 유틸리티 타입이다.
특정 타입에서 원하는 타입을 선택하여 선택한 타입으로 새로운 타입을 만들 수 있다..
Pick <가져올 타입, "특정 타입 키(복수 가능)">
유틸리티 타입 부분을 제외한 나머지 부분은 Omit 과 동일하다.
Example
여기 Omit에 쓰였던 메뉴리스트에 쓰이는 타입이 있다.
type MenuListType = {
id: number
title: string
icon: string
navigate: string
}
id, title, icon, navigate 총 4개의 값이 있는 객체에 대한 타입이다.
Pick 타입은 기존의 타입에서 선택한 타입만을 가지고 새로운 타입을 만든다. navigate 키 값만 선택하여 새로운 타입을 만들어보자.
타입 MenuListType 에서 navigate 이란 키 값만을 가져오고 싶다면 Pick를 사용하여
아래처럼 작성할 수 있다.
interface AdminMenuListType extends Pick<MenuListType, "navigate"> {}
또는
type AdminMenuListType = Pick<MenuListType, "navigate">
"navigate" 값을 선택하고 "name" 이란 값을 추가해보자.
interface ListType extends Pick<MenuListType, "navigate"> {
name: string
}
또는
type ListType = Pick<MenuListType, "navigate"> & { name: string }
두개이상의 타입을 선택해보자.
navigate와 icon 키 값을 선택하고 싶다면?
type ListType = Pick<MenuListType, "navigate" | "icon"> & { name: string }
선택하고 싶은 값이 여러 개라면 | 구분자로 제외할 값에 여러 개를 포함할 수 있다.
기존의 타입에서 원하는 값을 추출하여 재활용할 수 있다는 점에서는 Omit과 비슷하다. Omit은 기존의 생성된 타입에서 크게 벗어나지 않을 때 사용하면 편리하다. 사용할 타입이 덜어낼 타입보다 많을 때, 유용하게 쓰일 것 같다.
Pick은 기존의 생성된 타입에서 재활용할 타입이 많지 않을 때, 원하는 타입만 선택하여 사용한다면 유용하게 쓰일 것 같다.