結論
childrenに型をつけなければならない場合は、
import { ReactNode } from 'react'; function Parent({ children }: { children: ReactNode }) { return ( <div>{ children }</div> );
という感じで、ReactNodeを使うことにしました。
ことの発端
Reactでコンポーネントが子コンポーネントを受け取る場合、普段だと型を書かずに、
function Parent({ children }) { return ( <div>{ children }</div> );
という感じで受け取り、
import Parent from './Parent'; function Page() { return ( <Parent> <p>Ya-Ha-!</p> </Parent> ); }
という感じで使っていました。
以前は逐一型を書いていましたが、最近の方針として、なるべく型推論を使うようにしているからです。
しかし、そうすると、
import Parent from './Parent'; function Page() { return ( <Parent /> ); }
と、子要素を渡さずにつかうとエラーになってしまいます。
いざ、明示的に型を定義しようとしたんですが、何を使うべきか非常に迷いました。
当初はReactElementを使おうと思ったのですが、こちらの型定義ファイルを眺めてみると、childrenはReactNode、ReactNode[]で定義されていることが多かったので、ReactNodeを使おうと思った次第です。
なので、先の例で子コンポーネント無しでもエラーを出さないようにするなら、
import { ReactNode } from 'react'; function Parent({ children }: { children?: ReactNode; }) { return ( <div>{ children }</div> );
というような感じで書こうと思います。