関数コンポーネントにおいての適切な型を教えて下さい。

Question

#概要
下記のような関数コンポーネントにおいて、引数のpropsに対する適切な型の書き方を教えて下さい。

#コード

function Hoge(props:any){
  return(
    <>
    {props.children}
    </>
  )
}

#わからないこと
{props.child}で出力することを前提としており、適切な型はReact.ReactNodeかと思いますが、anyの部分を置き換えてもエラーになってしまいます。

適切な書き方を教えて下さい。

Answer 1

FCの型の事なのかpropsの事なのかchildrenの事なのかよくわからなかったので、まとめて書きます

• Propsの型：interfaceかtypeでPropsの型を自分で定義
• FunctionalComponentの型：React.FC<(propsの型)>
• childrenの型：childrenはPropsに指定しなくてもはいってくるので通常は不要。（その場合、型はReact.ReactNode）childrenを文字列などに限定したい場合はあえてPropsに明記する。

interface Props{
  foo:string;
  children?: string;
}
function Hoge(props:Props):React.FC<Props>{
  return <>{略}</>;
}

childrenの細かい型指定については次を参照
https://qiita.com/sangotaro/items/3ea63110517a1b66745b#children-の型を制限する