Reactのコンポーネントの型のつけ方

2022-06-08

以前 こういう記事 を書いたのですが。

今、というか結構前からコンポーネントへの型のつけ方を変えていたので、改めて紹介をば。

import { ReactNode } from "react"; export type HogeProps = { children: ReactNode; }; function Hoge({ children }: HogeProps): JSX.Element { return <div>{children}</div>; } export default Hoge;

以前は const で無名関数を作成していましたが、今は function を使うようになりました。

書きっぷりを変えた大きな理由はとくにないです、function のほうがムダにあれこれ考えず済むケースが多いのでそうしているだけですね。

ただ function を使用した場合、定数自体に型を付与することができないので、たとえば NextPage のような型は使用できない点に注意が必要です、これは普通にデメリットですね。

とはいえ const を使おうが function を使おうがぶっちゃけどっちでも良いと思います、統一さえされていればある程度なんでもオッケー派です。

© 2018 kk-web