誰に向けて？
「プロパティ 'children' は型 '{}' に存在しません」と言われて焦っている、React, TypeScript初学者向け。
関数コンポーネントにてchildrenを明示しないとエラーになる
気がついたらReactがバージョン18になっていました。
（2022年3月29日npmに公開らしい）
18、、ついに成人したのですかね？
（年齢ではない）
そして、関数コンポーネントでは以下のようなエラーが出るように。
// エラー:「プロパティ 'children' は型 '{}' に存在しません。」と怒られる
export const Hoge: React.FC = ({ children }) => {
return (
<div>
{children}
</div>
);
};
結論から言うとReact18から、以下のように明示的にchildrenを定義してやる必要があるそうです。
// childrenを明示してやる
// ?をつけるとオプショナル型となり、渡しても渡さなくてもいいように
type Props = {
children?: React.ReactNode;
};
export const Hoge: React.FC<Props> = ({ children }) => {
return (
<div>
{children}
</div>
);
};
なぜこのような仕様に？
もともとは、関数コンポーネント（Function Component）にReact:FCの型を当ててやると、暗示的にchildrenを渡せるようになっていました。
しかしこの仕様だと、childrenとして何か渡した方がいいのか判断できないとか、実はchildren使われてないので渡しても意味ないとか、不要なのにchildren含まれてて気持ち悪い、childrenとして渡せるものの種類が多いなどなど面倒があったのですね。
そこで、React.VFCというchildrenを持たない関数コンポーネントの型が生み出されました。
そしてついに、React 18でReact.FCにもchildrenが含まれなくなったのでした。
この一連の流れを、子供たち(children)の(型)安全を守ろう運動と言う、言わない。
childrenに関して、過去記事を参考にするときは注意ですね。
参考
https://stackoverflow.com/questions/71788254/react-18-typescript-children-fc
Thanks