[React] Propsの型をexportせず、コンポーネントから取得する方法
最近関わることになったプロジェクトで、 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
の他に ComponentPropsWithRef
や ComponentPropsWithoutRef
があり、それぞれ ref を許容するかしないかになります。
また、export する必要がなくなったので、ファイルの中に定義されているコンポーネントが 1 つであれば、全て Props
という命名で済むようになります。(同一ファイルにインナーコンポーネントを定義しているのであれば、そのコンポーネントの props は ComponentNameProps という命名になるかと。)
export とは関係ないですが、こっちの方がシンプルで見やすくもなりますね。
Discussion