Utility Types の Pick と Omit の基本的な使い方と違い

Posted at 2024-07-01

これはなに

すでに存在している型を参照して、新規に作成したコンポーネントの型を指定したい場面がありました。
この記事はそのときに使ったTypescript の Utility Types の Pick と Omit の基礎知識と違いをまとめました。

どちらも参照元の方から、利用したいプロパティを抽出するときに使います。

Todo というオブジェクトを参照する想定にします。

interface Todo {
  title: string;
  description: string;
  completed: boolean;
  date: number;
  people: string;
}

Pick は参照元の型から、利用したいプロパティを選択して形を構築します。
Typescript 2.1 でリリースされました。

Pick<（参照元の）型名, "利用するプロパティ名" | "利用するプロパティ名">;

前項で作成した Todo から利用したいプロパティを選択します。

type = TodoPreview = Pick<Todo, "title" | "completed">;

下記の型が定義されたことになります。

Type TodoPreview {
  title: string;
  completed: boolean;
}

Omit は Pick と逆の働きをします。
参照元の型から、利用しないプロパティを選択して、除外した状態で形を構築します。
Typescript 3.5 でリリースされました。

Omit<（参照元の）型名, "利用しないプロパティ名" | "利用しないプロパティ名">;

前項で作成した Todo から除外したいプロパティを選択します。

type = TodoPreview = Pick<Todo, "date" | "people">;

下記の型が定義されたことになります。

Type TodoPreview {
  title: string;
  description: string;
  completed: boolean;
}