TypeScriptで複数のプロパティの型を上書きしたいときにはOmitが便利

概要

すでにある型の定義から、複数のプロパティを消したり、上書きする時には、TypeScriptのユーティリティ型の一つである Omit が便利！という話です。

Omitの概要

Omit<T, Keys>は、オブジェクト型TからKeysで指定したプロパティを除いたオブジェクト型を返すユーティリティ型です。

https://typescriptbook.jp/reference/type-reuse/utility-types/omit
https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys

使う場面のイメージと使い方

APIにリクエストを送るときと状態を保持するときで型が異なっていて、
POSTする前に、リクエストパラメータを整形する必要がある場面を想定しています。

既存の型

export type PickupItem = {
  id: string;
  name: string;
  image: {
    name: string;
    url: string;
  }
  price: number;
};

export type Blog = {
  id: string;
  title: string;
  body: string;
  publish: boolean
  publishedAt: Date;
  image: {
    name: string;
    url: string;
  }
  items: PickupItem[];
};

Omitで拡張した型

Blog型から publishedAt と items を取り出して、 publishedAt の型の上書きと、 items プロパティを削除し、 item_ids という プロパティの追加を以下で行なっています。

export interface PostBlogParams extends Omit<Blog, 'publishedAt' | 'items'> {
  publishedAt: string;
  item_ids: string[];
}

// Omitの結果のPostBlogParams型が以下の通り
const params: PostBlogParams = {
  id: '',
  title: '',
  body: '',
  publish: false
  publishedAt: '',
  image: {
    name: '',
    url: '',
  },
  item_ids: [],
}