TypeScriptのPick: 型からプロパティを選び出す（サンプル付き）

Pick<T, K> は、T のプロパティのうち K で名前を挙げたものだけを持つオブジェクト型を作る組み込みのユーティリティ型です。関数やコンポーネントが大きな型のいくつかのフィールドだけを必要とするときに使います:

interface User {
  id: number;
  name: string;
  email: string;
  passwordHash: string;
  lastLogin: string;
}

type UserPreview = Pick<User, "id" | "name">;
// { id: number; name: string }

function renderPreview(user: UserPreview): string {
  return `#${user.id} ${user.name}`;
}

const ada: User = {
  id: 1, name: "Ada", email: "ada@example.com",
  passwordHash: "x9f...", lastLogin: "2024-03-15",
};

console.log(renderPreview(ada));                  // #1 Ada
console.log(renderPreview({ id: 2, name: "Linus" })); // #2 Linus

renderPreview は、使うものだけを求めているので、完全な User も普通の { id, name } オブジェクトも受け付けます。そのおかげで呼び出しやすく、テストもしやすくなります。Pick は型だけのものです。完全な ada オブジェクトは、実行時には5つのプロパティをすべて持ったままです。

構文とキーのチェック

Pick<Type, Keys>

Keys は1つのキーかキーのユニオン型で、どれも Type に存在しなければなりません。TypeScriptの標準ライブラリの定義は、それを制約にしています:

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

K extends keyof T があるので、打ち間違えたキーや存在しないキーはコンパイルエラーになり、エディターはキー名を補完できます:

interface Product {
  sku: string;
  title: string;
  price: number;
  stock: number;
}

type PriceTag = Pick<Product, "title" | "price">;

const tag: PriceTag = { title: "Lamp", price: 39 };
console.log(`${tag.title}: $${tag.price}`); // Lamp: $39

// @ts-expect-error: Type '"cost"' does not satisfy the constraint 'keyof Product'
type Broken = Pick<Product, "cost">;

エラーは error TS2344: Type '"cost"' does not satisfy the constraint 'keyof Product'. です。キーがチェックされない Omit とはここが違います。

Pick は readonly と省略可能を保つ

Pick は T のキーに対してマップするので、選んだ各プロパティは修飾子を保ちます:

interface Account {
  readonly id: number;
  email?: string;
  plan: "free" | "pro";
}

type AccountRef = Pick<Account, "id" | "email">;
// { readonly id: number; email?: string }

const ref: AccountRef = { id: 7 }; // email is still optional
// @ts-expect-error: Cannot assign to 'id' because it is a read-only property
ref.id = 8;

console.log(ref); // { id: 8 }

最後の行が { id: 8 } を表示するのは、readonly がコンパイル時だけのチェックだからです。代入は報告され、@ts-expect-error で抑えられましたが、それでも実行されました。選ぶと同時に修飾子を変えるには、結果を囲みます: Partial<Pick<Account, "plan">> や Required<Pick<Account, "email">>。

Pick と Omit

Pick は残すものを、Omit は捨てるものを名指しします。今はどちらも同じ結果になりますが、元の型が大きくなったときの振る舞いが違います:

interface Order {
  id: number;
  total: number;
  cardLast4: string;
  // added later: internalNotes: string;
}

type Receipt = Pick<Order, "id" | "total">;   // stays { id; total }
type AdminView = Omit<Order, "cardLast4">;    // will include internalNotes too

const receipt: Receipt = { id: 1, total: 49.9 };
const admin: AdminView = { id: 1, total: 49.9 };
console.log(receipt, admin); // { id: 1, total: 49.9 } { id: 1, total: 49.9 }

サーバーから外に出るデータには、Pick のほうが安全なデフォルトです。誰かが意図的に追加しない限り、型には何も現れません。

ネストした型から Pick する

Pick が見るのはトップレベルのキーだけです。Pick<Customer, "address.city"> のようなドット区切りのパスはネストした Pick ではなく、エラー（TS2344）です。インデックスアクセス型でネストした型に届き、そこから選びましょう:

interface Customer {
  id: number;
  name: string;
  address: {
    street: string;
    city: string;
    country: string;
  };
}

type City = Pick<Customer["address"], "city">; // { city: string }

// Keep the shape, trim the nested object
type ShippingLabel = Pick<Customer, "name"> & {
  address: Pick<Customer["address"], "city" | "country">;
};

const label: ShippingLabel = {
  name: "Ada",
  address: { city: "London", country: "UK" },
};

const city: City = { city: label.address.city };
console.log(label, city.city);
// { name: 'Ada', address: { city: 'London', country: 'UK' } } London

Customer["address"] は address プロパティの型です。同じ構文で配列の要素にも届きます。orders: Order[] というプロパティなら、Customer["orders"][number] は Order です。

型付きの pick() 関数

Pick は実行時には何もしません。小さなジェネリック関数で、選んだプロパティを新しいオブジェクトにコピーし、ちょうど Pick<T, K> を返せます:

function pick<T extends object, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> {
  const result = {} as Pick<T, K>;
  for (const key of keys) {
    result[key] = obj[key];
  }
  return result;
}

const book = { id: 3, title: "Dune", author: "Herbert", pages: 412 };

const summary = pick(book, "title", "author"); // { title: string; author: string }
console.log(summary);          // { title: 'Dune', author: 'Herbert' }
console.log(Object.keys(summary)); // [ 'title', 'author' ]
// pick(book, "isbn") would be error TS2345: Argument of type '"isbn"' is not assignable
// to parameter of type '"author" | "id" | "pages" | "title"'.

K extends keyof T があるので、TypeScriptは文字列の引数から K を推論でき、戻り値の型はちょうど選んだキーを持ちます。空のオブジェクトはまだそれらのプロパティを持っていないので、{} as Pick<T, K> のアサーションが必要です。ループがそれを埋めます。

値の型でプロパティを選ぶ

Pick はキーの名前で選びます。プロパティの型で選ぶには（たとえば「文字列のフィールドすべて」）、キーを絞り込む マップ型 を書きます:

type PickByValue<T, V> = {
  [P in keyof T as T[P] extends V ? P : never]: T[P];
};

interface Article {
  id: number;
  title: string;
  slug: string;
  views: number;
  published: boolean;
}

type TextFields = PickByValue<Article, string>;   // { title: string; slug: string }
type NumberFields = PickByValue<Article, number>; // { id: number; views: number }

const text: TextFields = { title: "Hello", slug: "hello" };
const nums: NumberFields = { id: 1, views: 120 };
console.log(text, nums); // { title: 'Hello', slug: 'hello' } { id: 1, views: 120 }

as 句は、型が一致するキーをそのキー自身に、それ以外を never にマップし、never のキーは捨てられます。細かい点が1つあります。省略可能なプロパティの型は undefined を含むので、省略可能な subtitle?: string はここでは string として数えられません。それも含めるには string | undefined と照らし合わせます。