TypeScriptの型の省略と抜粋 OmitとPickを使ったまとめ

はじめに

TypeScriptを書いてるとTypeで型を定義して書くことがあると思いますが、
PickとOmitを使うと、既に定義してある型を利用して、効率よく開発することができます。
PickとOmitの使い方を学んだ内容を簡単にまとめました。

型の省略

Omitを使うと、、TypeScriptの型の省略ができます。

下記のTodoTypeが既に定義してあり、userIdとidとtitleを型定義したい時があるとします。

export type TodoType = {
  userId: number;
  id: number; // idいらない
  title: string;
  completed: boolean; 
};

Omitを使うと、指定した型を省略できます。

export const Todo = (
  props: Omit<TodoType, "id"> // // Omitを使ってidを省略する
) => {
  const { title, userId, completed } = props;
  const completeMark = completed ? "[完]" : "[未]";
  return <p>{`${completeMark}${title}(ユーザー:${userId})`}</p>;
};

型の抜粋

Pickを使うと、TypeScriptの型の抜粋ができます。

下記のTodoTypeが既に定義してあり、userIdとtitleとcompletedだけを型定義したい時があるとします。

export type TodoType = {
  userId: number; // 欲しい
  id: number;
  title: string; // 欲しい
  completed: boolean; // 欲しい
};

Pickを使って、利用したい型のみを抜粋することができます。

export const Todo = (
  props: Pick<TodoType, "userId" | "title" | "completed"> // Pickを使ってuserIdとtitleとcompletedを抜粋する
) => {
  const { title, userId, completed } = props;
  const completeMark = completed ? "[完]" : "[未]";
  return <p>{`${completeMark}${title}(ユーザー:${userId})`}</p>;
};

使い方まとめ

/* 型の抜粋 */
Pick<元の型定義,抜粋したい型>

/* 型の省略 */
Omit<元の型定義, 省略したい型>
//　複数ある場合、|でつなぐ
Omit<元の型定義, 省略したい型|省略したい型>