言語
日本語
English

Caution

お使いのブラウザはJavaScriptが無効になっております。
当サイトでは検索などの処理にJavaScriptを使用しています。
より快適にご利用頂くため、JavaScriptを有効にしたうえで当サイトを閲覧することをお勧めいたします。

TypeScript辞典

  1. トップページ
  2. TypeScript辞典
  3. Pick<T, K> / Omit<T, K>

Pick<T, K> / Omit<T, K>

対応: Pick<T,K> TypeScript 2.1(2016)
Omit<T,K> TypeScript 3.5(2019)

既存の型からプロパティを選択または除外して新しい型を作るユーティリティ型です。『Pick<T, K>』は指定したプロパティだけを残し、『Omit<T, K>』は指定したプロパティを取り除きます。

構文

// Pick<T, K>: 型TからキーKのプロパティだけを取り出します
type 選択型 = Pick<元の型, "プロパティ名" | "プロパティ名">;

// Omit<T, K>: 型TからキーKのプロパティを除外した型を作ります
type 除外型 = Omit<元の型, "プロパティ名" | "プロパティ名">;

構文一覧

概要
Pick<T, K>型TからキーKで指定したプロパティだけを持つ型を返します。必要なプロパティが少ない場合に使います。
Omit<T, K>型TからキーKで指定したプロパティを除外した型を返します。不要なプロパティが少ない場合に使います。

サンプルコード

// 元の型を定義します
interface User {
	id: number;
	name: string;
	email: string;
	password: string;
	createdAt: Date;
	updatedAt: Date;
}

// Pick: 必要なプロパティだけを選択します
// ユーザーのプロフィール表示用にidとnameだけ取り出します
type UserProfile = Pick<User, "id" | "name">;
// { id: number; name: string; } と同等です

const profile: UserProfile = { id: 1, name: "桐生一馬" };
console.log(profile.name); // 『桐生一馬』と出力されます。
// console.log(profile.email); // エラー: emailはUserProfileにありません。

// Omit: 不要なプロパティを除外します
// APIレスポンスからpasswordを除外して公開用の型を作ります
type PublicUser = Omit<User, "password">;
// { id: number; name: string; email: string; createdAt: Date; updatedAt: Date; } と同等です

const publicUser: PublicUser = {
	id: 1,
	name: "桐生一馬",
	email: "kiryu_kazuma@wp-p.info",
	createdAt: new Date("2024-01-01"),
	updatedAt: new Date("2024-06-01"),
};
console.log(publicUser.email); // 『kiryu_kazuma@wp-p.info』と出力されます。

// 複数プロパティの除外
type UserForCreation = Omit<User, "id" | "createdAt" | "updatedAt">;
// 新規作成時にはid・日時フィールドを除外します
// { name: string; email: string; password: string; } と同等です

function createUser(data: UserForCreation): User {
	return {
		...data,
		id: Math.floor(Math.random() * 10000),
		createdAt: new Date(),
		updatedAt: new Date(),
	};
}
const newUser = createUser({ name: "真島吾朗", email: "majima_goro@wp-p.info", password: "hashed_pw" });
console.log(newUser.id); // ランダムなIDが出力されます(実行のたびに異なります)

// PickとOmitの使い分け: 残すプロパティが少ない場合はPick、除外するプロパティが少ない場合はOmit
// この例ではnameとemailの2つだけを表示したい場合:
type DisplayFields = Pick<User, "name" | "email">; // 2つ指定 → Pickが簡潔
// type DisplayFields = Omit<User, "id" | "password" | "createdAt" | "updatedAt">; // 4つ指定 → 冗長

function displayUser(user: DisplayFields): void {
	console.log(`${user.name} (${user.email})`);
}
displayUser({ name: "桐生一馬", email: "kiryu_kazuma@wp-p.info" });
// 『桐生一馬 (kiryu_kazuma@wp-p.info)』と出力されます

実行すると次のように出力されます。

npx ts-node ts_pick_omit.ts
桐生一馬
kiryu_kazuma@wp-p.info
桐生一馬 (kiryu_kazuma@wp-p.info)

概要

『Pick<T, K>』は型Tから指定したキーKのプロパティのみを持つ新しい型を生成します。内部実装は`{ [P in K]: T[P] }`というマップ型です。フォームの一部フィールドや、APIのレスポンスから必要な情報だけを取り出すのに使います。

『Omit<T, K>』は型Tから指定したキーKのプロパティを除外した新しい型を生成します。パスワードなど、外部に公開してはいけないフィールドを除いた型や、データベースに保存する前の「IDなし」状態の型などを作るのに便利です。

どちらを使うかは「残すプロパティの数」と「除外するプロパティの数」を比べて、記述が少ない方を選ぶと良いでしょう。また、Pick/OmitとPartial/Requiredを組み合わせることで(例: `Partial>`)、より細かい型のバリエーションを表現できます。

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。