🐨

[React] Propsの型をexportせず、コンポーネントから取得する方法

2025/01/17に公開

最近関わることになったプロジェクトで、 props の型を export している箇所が多く、props は export する必要があるのだろうかと思ったので記事にしてみます。

例えば、すごい簡単な例として以下のようなコードです。

export type SampleProps = {
  sample: string
}

export const SampleComponent = ({ sample }: SampleProps) => {
  return <>{sample}</>
}

props の型は export すべきなのか?

私の意見としては、props の型を export する必要はないと考えています。props やコンポーネントの内部実装は、コンポーネントを使用する側が意識する必要はないためです。

export を増えると、エディタのサジェストが増えることになります。また想定外のところで使われるようなコードが書かれることもあったり、export を外せないかチェックをしたりするケースも出てきます。なので、export を不用意に増やしたくないです。

ただ、props の型を使いたいケースとして、Storybook の props の型定義などの限定的な部分はあるかもしれません。その場合も props の型を export する必要はないと考えています。

props の型を使いたい場合は、コンポーネントから props の型を取得する

React.ComponentProps<typeof ComponentName> と書くと、コンポーネントから props の型を取得できます。これで、 props の型を export する必要は無くなりますね。

type PropsType = React.ComponentProps<typeof TopEvent>

なお ComponentProps の他に ComponentPropsWithRefComponentPropsWithoutRef があり、それぞれ ref を許容するかしないかになります。

また、export する必要がなくなったので、ファイルの中に定義されているコンポーネントが 1 つであれば、全て Props という命名で済むようになります。(同一ファイルにインナーコンポーネントを定義しているのであれば、そのコンポーネントの props は ComponentNameProps という命名になるかと。)

export とは関係ないですが、こっちの方がシンプルで見やすくもなりますね。

Discussion