😶‍🌫️

【TypeScript】型の中から特定のものを除外する（Omit）

に公開
React
TypeScript
omit
tech

Omitとは

Omitとはなんぞや。
OmitはTypeScriptで「あの型を流用したいが一部いらないんだよなぁ」という時に使えるUtility Typesの一つ。（ざっくり）

実際に見てみよう

基本的な使い方

例えば以下のような型があるとします。

type Hoge = {
  id: number
  title: string
  text: string
}

この型の中からidとtitleだけ使いたいと思った時に

type Moge = {
  id: number
  title: string
}

と定義し直すのではなく、

type Moge = Omit<Hoge, "text">

Hogeという型から"text"を除外する、とできるのです。
簡単ですよね。

HTMLタグ

例えばReactで<button>タグをラップしたコンポーネントを作る際、classNameを外から渡されたくない場合は以下のように書きます。

Omit<React.ComponentProps<"button">, "className">

これでbuttonタグが元々持ってるプロパティの中から"className"を除外する、となります。

実際にReact*TypeScriptで使ってみよう

// 記事の詳細ページ用の型
type NewsDetailProps = {
  id: number
  title: string
  content: React.ReactNode
}

...

// 記事の一覧ページ用の型
type NewsArchiveProps = Omit<NewsDetailProps, "content">

export function NewsArchive({ id, title }: NewsArchiveProps)  {
  const items = [
    { id: 1, title: "記事タイトルA" },
    { id: 2, title: "記事タイトルB" },
  ];

  return (
    <>
        <ul>
          {items.map(item => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
    </>
  )
}

わかりやすい例として記事の詳細ページ用の型を元にOmitを使用し、一覧ページ用の型を生成しています。（idとtitleだけ必要なので、contentだけ除外しています。）

最後に

Omitは便利ではありますが、乱用は避けるようにしましょう。
元の型を知らないとなんの型なのかわかりづらくなってしまったり、元の型にプロパティを追加、削除した時などに影響を受けてしまうためです。

明確なルールを設けて、意図のないOmitの使用を避けるようにすると良さそうです。

Discussion