メディア系サイトのコンポーネントを作る時に覚えておきたいTypeScriptの型【Omit】

TypeScriptで親方型を渡したくない場合の定義方法についてです。

属性の型を一部除いて全て受け取るためにOmitを利用する

Omitは下記のように記述します。

type Props = {
  text: string
  orderd: number
} && Omit<ComponentPropsWithoutRef<'p'>, 'className'>

const Component = ({}: Props) => {
  return (
    // 省略
  )
}

Omitは2つの引数を取り、第一引数にはオブジェクトの型を渡して、第二引数には第一引数のプロパティを渡します。

第二引数で指定した、プロパティが省かれた新しい型のオブジェクトを作れます！

あえて第一引数、第二引数と表現していますが、公式サイトではTとKeysと表現されています。

注意したいのは第二引数で第一引数にないプロパティの場合やタイポがあった場合でもエラーにならないことです…（エラーを出してほしいところです）

まとめ

TypeScriptの型定義の方法はたくさんあります。

基礎的な部分はサバイルバTypeScriptや動画からも学べますが、実装し始めると型をどのように利用して良いのかわからないことが多いと感じます…

適切に型を加えられるようにこれからも精進していきます！