React.VFC を使うべき理由

BRANK

React.VFC を使った方が良い理由についてまとめてみた。 React.VFC とはFunction Componentを定義するための型である React.FC はchildrenが最初から暗黙的に定義されてしまっているため、必要ないのにchildrenを渡してしまってもエラーにならない仕様になっている。これでは暗黙的に許可してしまうため実際に渡っているのか渡っていないのかがわからない。そこで @types/react v16.9.48 からはReact.VFC が追加されており、こちらではchildrenが含まれない。なので未定義の状態でchildrenを渡した場合、errorを出してくれる。 サンプルコードexport type Props = { text: string; }; const Fuga: React.VFC<Props> = (props) => { return ( <div> <p>{props.text}</p> </div> ); }; export const Hoge: React.VFC = () => { return ( <div> <Fuga text={"テキスト"}>children</Fuga> </div> ); }; このように書くと以下のようなerrorが出てくれる。型 '{ children: string; text: string; }' を型 'IntrinsicAttributes & Props' に割り当てることはできません。 プロパティ 'children' は型 'IntrinsicAttributes & Props' に存…