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 を使おうがぶっちゃけどっちでも良いと思います、統一さえされていればある程度なんでもオッケー派です。