Pick と Omit のサンプルコード — TypeScript

1Pick で2つだけ選ぶ

元の型から必要なプロパティだけを選んで新しい型を作る、Pick の最も基本の形です。選ばなかったプロパティを持たせようとするとエラーになることも合わせて確かめます。

TypeScript

type Employee = {
  id: number;
  fullName: string;
  department: string;
  salary: number;
};

// 必要な2つだけを選んだ型を作る
type NameCard = Pick<Employee, "id" | "fullName">;

const taroCard: NameCard = { id: 1, fullName: "佐藤太郎" };
console.log(taroCard);
// const wrong: NameCard = { id: 2, fullName: "鈴木花子", salary: 300000 }; // salary は選んでいないのでエラー

2Omit で見せたくない項目を除く

パスワードのような外部に出してはいけない項目を Omit で取り除いた「公開用の型」を作る例です。変換関数の戻り値をこの型にしておけば、うっかり password を含めて返す実装がコンパイルの時点で防げます。

TypeScript

type Account = {
  accountId: number;
  email: string;
  password: string;
};

// 公開してはいけない password を取り除いた型
type PublicAccount = Omit<Account, "password">;

function toPublic(account: Account): PublicAccount {
  return { accountId: account.accountId, email: account.email };
}

const stored: Account = { accountId: 1, email: "taro@example.com", password: "secret" };
console.log(toPublic(stored)); // password を含まない形で返せる

3一覧画面用の要約型を Pick で作る

詳細データの全項目は一覧画面には不要なので、必要な列だけの要約型を Pick で派生させ、map で変換する例です。「元になる型は1つ、画面ごとの型は派生で作る」という実務の型設計の縮図です。

TypeScript

type Article = {
  articleId: number;
  title: string;
  content: string;
  viewCount: number;
};

// 一覧画面に必要な項目だけの要約型
type ArticleSummary = Pick<Article, "articleId" | "title">;

const articles: Article[] = [
  { articleId: 1, title: "TS入門", content: "本文...", viewCount: 100 },
  { articleId: 2, title: "型の操作", content: "本文...", viewCount: 80 },
];

const summaries: ArticleSummary[] = articles.map(function (a) {
  return { articleId: a.articleId, title: a.title };
});
console.log(summaries);

4新規作成の入力型を Omit で作る

ID はサーバー側で採番するため、新規作成の入力には含めない——という定番の場面を Omit で表します。入力型と完成形の Task が同じ元から派生しているので、項目を追加しても両者がずれません。

TypeScript

type Task = {
  taskId: number;
  taskName: string;
  done: boolean;
};

// taskId は採番側で決めるので、入力には含めない
type TaskInput = Omit<Task, "taskId">;

let nextId = 1;
function createTask(input: TaskInput): Task {
  const created: Task = { taskId: nextId, ...input };
  nextId = nextId + 1;
  return created;
}

console.log(createTask({ taskName: "資料作成", done: false }));
console.log(createTask({ taskName: "レビュー依頼", done: false }));

5Partial と Omit を組み合わせる

「ID は変更不可、それ以外は任意で渡す」という更新 API の入力型を、Partial<Omit<Member, "memberId">> の重ねがけで表現します。ユーティリティ型は入れ子にできるので、実務の細かい要件も既存の型の組み合わせで書けます。

TypeScript

type Member = {
  memberId: number;
  memberName: string;
  email: string;
};

// 更新APIの入力: ID は変更不可、それ以外は任意で渡す
type MemberUpdate = Partial<Omit<Member, "memberId">>;

function updateMember(member: Member, changes: MemberUpdate): Member {
  return { ...member, ...changes };
}

const taro: Member = { memberId: 1, memberName: "Taro", email: "taro@example.com" };
console.log(updateMember(taro, { email: "new@example.com" }));
// updateMember(taro, { memberId: 99 }); // Omit 済みなので memberId の変更はエラー

サンプルコードで身につける: Pick と Omit

1Pick で2つだけ選ぶ

2Omit で見せたくない項目を除く

3一覧画面用の要約型を Pick で作る

4新規作成の入力型を Omit で作る

5Partial と Omit を組み合わせる