【TypeScript】Omit型とは？3で分かる特定のプロパティを除外するテクニック

こんにちは！

TypeScriptを使っていると、オブジェクトから特定のプロパティを削除したい場面ってよくありますよね。

Omitってどう使うんだっけ？

Omitを使うとどんな時に便利なの？

OmitとPickって何が違うの？

このようにお悩みの方も多いのではないでしょうか？

この記事では、TypeScriptのOmit型を使って、オブジェクトから特定のプロパティを安全かつ簡単に削除する方法を徹底解説します。

この記事は以下のような人におすすめです。

この記事はこんな人におすすめ！

TypeScriptのOmit型について知りたい！
オブジェクトから特定のプロパティを削除する方法を知りたい！
Omit型とPick型の違いを理解したい！
効率的なTypeScriptの型定義をしたい！

この記事を読めば、Omit型を自由自在に使いこなせるようになるだけでなく、TypeScriptの型定義がより安全で効率的になること間違いなしです。さらに、Omit型を活用してコードをスッキリさせるコツもお伝えします。

「TypeScriptでOmit型を使いこなしたい方」「型定義をもっとスマートにしたい方」は、ぜひ参考にしてください。

それでは、順を追って詳しく見ていきましょう！

Contents

TypeScriptのOmit型とは？

まずは、Omit型の基本的な仕組みについておさらいしましょう。

Omit型は、TypeScriptのUtility Typesの一つで、既存の型から特定のプロパティを取り除いた新しい型を作成するために使用します。簡単に言えば、「元の型から、指定したプロパティだけを削除した型を作る」というイメージです。

Omit型の定義は以下のようになります。

type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

少し複雑に見えますが、以下のように理解すると分かりやすいでしょう。

T：元の型（プロパティを削除したい型）
K：削除したいプロパティのキー（文字列リテラル型のユニオン）

例えば、以下のようなUser型があったとします。

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

このUser型からageプロパティを削除した新しい型UserWithoutAgeを作りたい場合、Omit型を使って以下のように定義できます。

type UserWithoutAge = Omit<User, 'age'>;

これにより、UserWithoutAge型は以下のようになります。

interface UserWithoutAge {
  id: number;
  name: string;
  email: string;
}

Omit型を使うことで、元の型を変更せずに、必要なプロパティだけを持つ新しい型を簡単に作成できます。

TypeScriptはコンパイル時に型チェックを行うため、Omit型を使うことで、存在しないプロパティにアクセスするなどの型エラーを未然に防ぐことができます。

TypeScriptでOmit型を使うメリット

TypeScriptでOmit型を活用することには、いくつかのメリットがあります。主なものを詳しく見ていきましょう。

コードの再利用性が向上する

Omit型を使うことで、既存の型から必要な部分だけを抽出した新しい型を簡単に定義できます。これにより、同じような型定義を何度も書く手間が省け、コードの再利用性が向上します。例えば、User型から、APIに送信するデータとして不要なidプロパティを削除した型をOmit<User, 'id'>で定義し、別の場所でも同じようにidを除いた型が必要になった際に再利用できます。

型の安全性が高まる

Omit型を使うことで、存在しないプロパティへのアクセスをコンパイル時に検出できます。これにより、実行時にエラーが発生する可能性を減らし、より安全なコードを書くことができます。例えば、User型からageプロパティを削除したUserWithoutAge型を使った場合、UserWithoutAge型の変数にageプロパティを設定しようとすると、TypeScriptがエラーを報告してくれます。

コードの可読性が向上する

Omit型を使うことで、型定義の意図が明確になります。「この型は、元の型から〇〇というプロパティを削除したものだ」ということが一目でわかるため、コードの可読性が向上します。例えば、Omit<User, 'password' | 'isAdmin'>という型定義を見ただけで、User型からpasswordとisAdminプロパティを削除した型であることがすぐに分かります。

リファクタリングが容易になる

元の型が変更された場合でも、Omit型を使っていれば、その影響を最小限に抑えることができます。Omit型は、元の型を参照しているため、元の型の変更に自動的に追従します。例えば、User型に新しいプロパティが追加された場合でも、Omit型で定義された型は自動的にその変更を反映し、型定義を修正する手間が省けます。

型定義の集中管理ができる

Omit型を使うことで、特定のプロパティを除外するという定義を一箇所にまとめることができます。これにより、型定義の管理が容易になり、変更にも強くなります。例えば、複数の場所でUser型からpasswordを除いた型が必要になった場合でも、Omit型で一度定義しておけば、その定義を再利用できます。

これらのメリットを考えると、TypeScriptでOmit型を積極的に活用することは、開発効率と品質の向上に大きく貢献すると言えるでしょう。

Omit型の具体的な使い方

では、具体的にOmit型をどのように使えば良いのか、具体的な例を交えながら解説していきます。

基本的な使い方

Omit型は、以下のように使用します。

type NewType = Omit<OriginalType, KeysToRemove>;

OriginalType：元の型
KeysToRemove：削除したいプロパティのキー（文字列リテラル型のユニオン）

具体例を見てみましょう。

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

// Product型からdescriptionプロパティを削除した型
type ProductSummary = Omit<Product, 'description'>;

const productSummary: ProductSummary = {
  id: 123,
  name: 'Awesome T-Shirt',
  price: 29.99,
  imageUrl: '/images/t-shirt.jpg'
};

console.log(productSummary);

この例では、Product型からdescriptionプロパティを削除したProductSummary型を定義しています。ProductSummary型は、id、name、price、imageUrlプロパティを持つことになります。

複数のプロパティを削除する

Omit型では、複数のプロパティを削除することも可能です。削除したいプロパティのキーを|で区切って指定します。

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
  isAdmin: boolean;
}

// User型からageとisAdminプロパティを削除した型
type PublicUser = Omit<User, 'age' | 'isAdmin'>;

const publicUser: PublicUser = {
  id: 456,
  name: 'John Doe',
  email: 'john.doe@example.com'
};

console.log(publicUser);

この例では、User型からageとisAdminプロパティを削除したPublicUser型を定義しています。PublicUser型は、id、name、emailプロパティを持つことになります。

ネストされたオブジェクトの型操作

Omit型は、ネストされたオブジェクトのプロパティを直接削除することはできません。しかし、いくつかの方法を組み合わせることで、ネストされたオブジェクトの型操作を実現できます。

例えば、以下のようなネストされたオブジェクトを持つ型を考えてみましょう。

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

このProduct型から、detailsオブジェクトのdescriptionプロパティを削除したい場合、以下のように型を定義することができます。

type ProductWithoutDetailsDescription = Omit<Product, 'details'> & {
  details: Omit<Product['details'], 'description'>
};

この例では、まずOmit<Product, 'details'>でdetailsプロパティを削除し、次に{ details: Omit<Product['details'], 'description'> }でdetailsプロパティを再定義しています。これにより、detailsオブジェクトからdescriptionプロパティが削除された新しい型を作成することができます。

Omit型を使った具体的な場面

Omit型は、具体的には以下のような場面で役立ちます。

APIのリクエスト/レスポンスの型定義
APIから取得したデータの一部だけを使いたい場合や、APIに送信するデータから不要なプロパティを削除したい場合に便利です。

フォームの入力値の型定義
フォームに入力された値から、不要なプロパティを削除した型を定義する際に役立ちます。

Reduxなどの状態管理ライブラリでの型定義
ストアの状態から、特定のコンポーネントに必要なプロパティだけを抽出した型を定義する際に便利です。

テストデータの作成
テストに必要なプロパティだけを持つオブジェクトを簡単に作成できます。

Omit型をうまく活用することで、型定義を効率化し、コードの保守性を高めることができます。

Omit型とPick型の違い

TypeScriptの型操作でよく使われるOmit型とPick型。名前も似ていますが、一体何が違うのでしょうか？

比較項目	Omit型	Pick型
役割	指定したプロパティを削除した新しい型を作成	指定したプロパティだけを抽出した新しい型を作成
型の定義方法	`Omit<OriginalType, KeysToRemove>`	`Pick<OriginalType, KeysToPick>`
ユースケース	型から特定のプロパティを除外したい場合に便利	型から特定のプロパティだけを抽出したい場合に便利
イメージ	元の型から「不要なものを捨てる」	元の型から「必要なものを選ぶ」

Omit型とPick型は、互いに対照的な役割を持っています。Omit型は、元の型から不要なプロパティを削除するのに対し、Pick型は、元の型から必要なプロパティだけを抽出します。

例えば、以下のようなProduct型があったとします。

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

このProduct型から、idとnameプロパティだけを抽出したProductIdAndName型をPick型を使って定義すると、以下のようになります。

type ProductIdAndName = Pick<Product, 'id' | 'name'>;

一方、Product型からdescriptionとimageUrlプロパティを削除したProductWithoutDescriptionAndImage型をOmit型を使って定義すると、以下のようになります。

type ProductWithoutDescriptionAndImage = Omit<Product, 'description' | 'imageUrl'>;

Omit型とPick型は、どちらも型定義を効率化するための強力なツールです。それぞれの特性を理解し、適切な場面で使い分けることで、より柔軟で保守性の高いコードを書くことができます。

【TypeScript】Pick型でピックアップ！？必要なプロパティだけを抽出しようTypeScriptのPick型の使い方とメリットを網羅的に解説。型定義の効率化から実践的な活用例まで、コード例を交えて初心者にもわかりやすく説明しています。開発効率を上げたい方必見！...

Omitを使う上での注意点

Omitは非常に便利なユーティリティ型ですが、使用する上で注意すべき点もあります。

存在しないプロパティの指定

Omitで元の型に存在しないプロパティを指定した場合、コンパイルエラーは発生しません。しかし、そのプロパティは無視されるため、意図した型定義にならない可能性があります。

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

// Product型に'discount'プロパティは存在しない
type ProductSummary = Omit<Product, 'discount'>;

const productSummary: ProductSummary = {
  id: 123,
  name: 'Example Product',
  price: 99.99
};

この例では、Product型に存在しないdiscountプロパティをOmitで指定していますが、コンパイルエラーは発生しません。ProductSummary型は、Product型と全く同じ型になります。

Omitで使用するプロパティ名が正しいか、元の型に存在するかを確認するようにしましょう。

また、コンパイルエラーが発生するようにするのも1つの手です。実装方法は以下の記事でわかりやすく解説されているので、参考にしてみてください。

プロパティ名のタイプミス

「存在しないプロパティの指定」と同様、タイプミスをしてもコンパイルエラーは発生しません。そのため、Omitで除外するプロパティ名を指定する際に、タイプミスがあると、意図しない型が生成されてしまいます。

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

// タイプミス: 'desciption'
type ProductSummary = Omit<Product, 'desciption'>;

const productSummary: ProductSummary = {
  id: 123,
  name: 'Example Product',
  price: 99.99,
  description: 'This is a great product.' // エラーにならない
};

この例では、Omitでdescriptionを除外するつもりが、desciptionとタイプミスしているため、descriptionプロパティが残ったままの型が生成されてしまいます。

プロパティ名を指定する際は、タイプミスがないか十分注意しましょう。

型定義の複雑化

Omitを多用すると、型定義が複雑になり、可読性が低下する可能性があります。

type VeryComplexType = Omit<
  Omit<
    Omit<OriginalType, 'prop1'>,
    'prop2'
  >,
  'prop3'
>;

このような複雑な型定義は、できるだけ避けるようにしましょう。型定義を整理したり、Pick型など他のユーティリティ型と組み合わせたりするなど、工夫が必要です。

具体例で理解を深める

ここでは、Omitの具体的な使用例を通して、理解を深めていきましょう。

APIリクエスト/レスポンスの型定義

APIとの通信を行う際、リクエストとレスポンスで型が微妙に異なる場合があります。Omitを使うことで、これらの型定義を効率的に行うことができます。

例えば、次のようなAPIを考えてみましょう。

商品登録API (POST /products)

リクエストボディ：商品名、価格、説明
レスポンスボディ：商品ID、商品名、価格、説明

商品更新API (PUT /products/:id)

リクエストボディ：商品名、価格、説明（省略可能）
レスポンスボディ：商品ID、商品名、価格、説明

これらのAPIで使用する型を、Omitを使って定義すると、次のようになります。

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

// 商品登録APIのリクエストボディ
type CreateProductRequest = Omit<Product, 'id'>;

// 商品更新APIのリクエストボディ
type UpdateProductRequest = Partial<Omit<Product, 'id'>>;

// APIのレスポンスボディ
type ProductResponse = Product;

CreateProductRequestは、Product型からidを除外した型として定義されます。UpdateProductRequestは、Product型からidを除外した上で、すべてのプロパティを省略可能にした型として定義されます。

このように、Omitを使うことで、APIリクエスト/レスポンスの型定義を効率的に行うことができます。

ReactのPropsの型定義

ReactコンポーネントのPropsの型定義にも、Omitはよく使用されます。

例えば、次のようなReactコンポーネントを考えてみましょう。

interface ButtonProps {
  text: string;
  onClick: () => void;
  className?: string;
  disabled?: boolean;
}

const Button: React.FC<ButtonProps> = ({ text, onClick, className, disabled }) => {
  return (
    <button
      className={className}
      onClick={onClick}
      disabled={disabled}
    >
      {text}
    </button>
  );
};

このButtonコンポーネントを拡張して、PrimaryButtonコンポーネントを作成したいとします。PrimaryButtonは、ButtonのPropsに加えて、primaryというboolean型のPropsを持つとします。

この場合、Omitを使うと、次のように型定義を効率的に行うことができます。

interface ButtonProps {
  text: string;
  onClick: () => void;
  className?: string;
  disabled?: boolean;
}

// ButtonPropsからclassNameを除外
type PrimaryButtonProps = Omit<ButtonProps, 'className'> & {
  primary: boolean;
};

const PrimaryButton: React.FC<PrimaryButtonProps> = ({ text, onClick, disabled, primary }) => {
  return (
    <button
      className={primary ? 'primary-button' : 'button'}
      onClick={onClick}
      disabled={disabled}
    >
      {text}
    </button>
  );
};

PrimaryButtonPropsは、ButtonPropsからclassNameを除外した型に、primaryプロパティを追加した型として定義されます。&は、型のインターセクション（Intersection Types）を表します。

このように、Omitを使うことで、ReactコンポーネントのPropsの型定義を効率的に行うことができます。

【付録】さらに学びを深めるためのリソース

intersection型について理解を深めたところで、さらに学習を進めたい方のために、いくつかのリソースを紹介します。
これらのリソースを活用することで、TypeScriptの型システムについてより深い知識を得ることができるでしょう。

オンラインで参照できる公式ドキュメント

TypeScript公式ハンドブック

https://www.typescriptlang.org/docs/
TypeScriptの公式ドキュメントです。
intersection型を含む、すべての型システムの機能について詳細な説明があります。

TypeScript Deep Dive

https://basarat.gitbook.io/typescript/
TypeScriptの深い部分まで掘り下げて解説しているオンラインブックです。
無料で読むことができ、intersection型についても詳しく説明されています。

TypeScriptの学習は終わりがありません。
新しい機能が常に追加され、より良い書き方が発見されています。
継続的に学習を続けることで、より良いTypeScriptプログラマーになれるはずです。

キャリア形成/給与還元
ひとつひとつ真摯に向き合う企業