🪝

TypeScriptのPick<T, U>を知ろう

に公開
TypeScript
frontend
DatePicker
tech

概要

別記事を書くにあたりPick<T, U>を理解しようの会

Pick<T, U>とは

ユーティリティ型の1つ。

オブジェクトの型TからキーのUを抽出したい時に使う。
参考: https://www.typescriptlang.org/docs/handbook/utility-types.html#picktype-keys

type Hoge = { name: string; message: string };

const hoge: Pick<Hoge, "name"> = { name: "ほげ" }; // ✅抽出したnameなのでOK
const fuga: Pick<Hoge, "name"> = { message: "こんにちは" }; // 🚫抽出したname以外なのでNG

複数要素を抽出したい時はこんな感じ。

type Hoge = { name: string; message: string; age: number };

const hoge: Pick<Hoge, "name" | "age"> = { name: "ほげ", age: 20 };

UがTのkeyofに当てはまる必要があり、それ以外はエラーになる。

type Hoge = { name: string; message: string; age: number };

type PickHoge = Pick<Hoge, "hoge">; // 🚫nameでもmessageでもageでもないのでNG

Uにneverを入れた場合、型は{}になるのでオブジェクトとして何を入れてもOKな状態になる。

type Hoge = { name: string; message: string; age: number };

const hoge: Pick<Hoge, never> = { hoge: true }; // ✅{}型なのでOK

Discussion