TypeScript Omit徹底解説: 使い方・実践例で簡単マスター！

こんにちは！

この記事では使いこなすと開発効率がグンと上がる、TypeScriptの Omit について分かりやすく解説します。
Omitとは何か、使い方、どういう場面で使うべきか、実践的な例について具体的なコードを用いて説明します。

それでは、さっそく始めましょう！

超便利なTypeScriptの8つのユーティリティ型で効率アップ

使いこなすととても便利なTypeScriptのPartial、Readonly、Pick、Required、Record、Omit、Exclude、Extractのユーティリティ型について特徴と使い所を解説します。

gizanbeak.com

Omitとは？

まずはTypeScriptのOmitの概要について説明します。

OmitはTypeScriptのユーティリティ型のひとつで、型から指定したプロパティを取り除くことができます。

具体的なコードを見てみましょう。

type Person = {
  id: number;
  firstName: string;
  lastName: string;
};

type WithoutLastName = Omit<Person, "lastName">;

このコードでは Person 型から lastName プロパティを取り除いた新しい型 WithoutLastName が作成されます。

特定の型を使いまわしたいけどこのプロパティは要らない、といった場面で有用ですね。

Omitの使い方

次にOmitの使い方について説明します！

Omitを使うには、まずはじめに Omitに渡す2つの引数 を指定します。
第1引数には対象となる型 、第2引数には取り除きたいプロパティ名 を指定します。

type OmittedType = Omit<T, K>;

ここで T は対象となる型、K は取り除きたいプロパティ名です。

それでは具体的な例を見てみましょう。

type Animal = {
  name: string;
  species: string;
  age: number;
};

type AnimalNameAndSpecies = Omit<Animal, "age">;

この例では Animal 型から age プロパティを取り除いた新しい型 AnimalNameAndSpecies が作成されます。

どういう場面で使うべきか

では、次はOmitが役立つ場面について説明します。

使い方の章でも説明した通り、Omitは特定のプロパティを除外した型が必要な場合に使用します。

例えば、APIのレスポンスデータを処理する際に一部のプロパティが不要だったり、他の型に変換する必要がある場合にOmitを使用して型を作成することで効率的にコーディングができます。

interface ApiResponse {
  userId: number;
  email: string;
  password: string;
  displayName: string;
}

type UserInfo = Omit<ApiResponse, "password">;

この例では、APIのレスポンスデータ型 ApiResponse から不要な password プロパティを除外した新しい型 UserInfo を作成しています。

新しく1から型を定義するのではなく、Omitを使用することで元の型が変更された場合などでも対応しやすくなりますね。

実践的な例

最後にOmitを使用した実践的な例を紹介します！

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  imageUrl: string;
}

type ProductPreview = Omit<Product, "description" | "imageUrl">;

上記のコードでは、オンラインショップの商品情報を表す Product 型から商品一覧ページで必要のない description と imageUrl プロパティを除外した新しい型 ProductPreview を作成しています。

function renderProductPreview(product: ProductPreview): string {
  return `
    <div>
      <h2>${product.name}</h2>
      <p>Price: ${product.price}</p>
    </div>
  `;
}

const product: Product = {
  id: 1,
  name: "Tシャツ",
  price: 5000,
  description: "ハンドメイドのおしゃれなTシャツです。.",
  imageUrl: "https://example.com/image.jpg",
};

console.log(renderProductPreview(product as ProductPreview));

更にこのコードでは先程作成した ProductPreview 型の product を受け取る renderProductPreview 関数を定義して商品一覧ページのHTMLを生成しています。

また、product オブジェクトを ProductPreview 型として扱うために、asキーワードを使用して型アサーションを行っています。

詳細ページでは必要だけど一覧ページではこの情報は必要ない、というケースは実際の開発でも多々あるため、こういう時にOmitを使いこなせると便利ですね！

Omitは非常に便利なユーティリティ型なので、型定義をシンプルに保ちながら特定のプロパティを取り除く際にぜひ活用してみてください。

最後まで読んでいたださき、ありがとうございました！

Gizanbeak