【TypeScript】Utility TypesのOmitを深く理解する

この記事は何？

この記事は、Utility Typesの一つであるOmitについて深く理解する記事です。
Utility Typesってそもそも何？という型（方）は以下の記事を御覧ください🙇🏻
👉 TypeScriptのUtility Typesを理解して活用する

そもそも、TypeScriptって何？って型は以下を御覧ください
👉 JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事① ~はじめに~

Omit＜Type, Keys＞とは

TypeScript公式には以下のように書かれています。

Constructs a type by picking all properties from Type and then removing Keys.
Typeからすべてのプロパティを選択し、Keysを削除して、型を作成します。
https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys

これは、予め作成したある型中から、一部のプロパティを削除（無視）、して新たに型を作ることのようです。
具体的に言うと、例えばKokyuFeatures型があるとします。

interface KokyuFeatures {
  baseKokyu: string;
  type: number;
  techniqueName: string;
  user: string;
}

ここで、Technique型を作るとします。
Technique型は以下のように作りたいです。

interface Technique {
  baseKokyu: string;
  type: number;
  techniqueName: string;
}

const MinamoGiri: Technique = {
  baseKokyu: "水の呼吸",
  type: 1,
  techniqueName: "水面斬り",
}

Technique型は、KokyuFeatures型からuserだけを取り除いただけです。
なので、わざわざTechnique型を最初から書くのは面倒くさい気もします。

そこで、Omit＜Type, Keys＞を利用します。
Omit＜Type, Keys＞は次のように利用します。

type Technique = Omit<KokyuFeatures, "user">

Omit＜Type, Keys＞は、Typeの中からKeysを除外して、新しい型を作成します。
今回は、KokyuFeatures型からuserを除外して、新しい型を生成しました。

これにより、最終的には以下のようにOmitを活用できます。

type Technique = Omit<KokyuFeatures, "user">

const MinamoGiri: Technique = {
  baseKokyu: "水の呼吸",
  type: 1,
  techniqueName: "水面斬り",
}

React&TypeScriptなどで使いたい場合は、以下のように書けば良さそうです。

import { KokyuFeatures } from '~~'

type Technique = Omit<KokyuFeatures, "user">

const TechniqueList: React.FC<Technique> = (props) => {
 ...
}

このように、鬼滅の刃の技に関するオブジェクトを簡単に記述することが出来ました。

おわりに

今回は、Omitについて書いてみました。
是非、ご活用ください！

参考

• https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys