react-router 코드에서 갑자기 등장한 Pick! import에도 없고 대체 이게 뭐지…?

export type Navigator = Pick<History, "go" | "push" | "replace" | "createHref">;

interface NavigationContextObject {
  basename: string;
  navigator: Navigator;
  static: boolean;
}

export const NavigationContext = React.createContext<NavigationContextObject>(
  null!
);

엥 대체 Pick이 뭐지…? 검색해보니 타입스크립트의 Utility Type이라고 한다. 나... 아직 타입스크립트를 많이 모르는구나…ㅜㅜ

이번 기회에 모든 유틸리티 타입들을 정리해보자! 아래 제공된 모든 예제는 TypeScript공식 Docs에서 참고하였다!

Pick<Type, keys>

v2.1 Constructs a type by picking the set of properties Keys(string literal or union of string literals) from Type

전달받은 Type에서 string literal 혹은 union of string으로 받은 keys를 뽑아서 타입을 생성한다.

interface Todo {
  title: string;
  description: string;
  completed: boolean;
}
 
type TodoPreview = Pick<Todo, "title" | "completed">;
 
const todo: TodoPreview = {
  title: "Clean room",
  completed: false,
};

예제를 보면 Todo는 title, description, completed를 가지고 있는데 여기서 Pick을 활용해 TodoPreview는 title과 completed만을 가지는 타입으로 지정할 수 있다.

즉, 위 react-router코드에서는 History에서 go, push, replace, createHref만 가져와서 만든 새로운 타입을 Navigator로 지정한 것이다.