React,TypeScript関数の書き方について

Question

下のように書くと変数testを関数コンポーネントとして型定義することができると思います。

const test: React.VFC = () => {
  return (
    <>
      <h1>Hello</h1>
    </>
  );
};

同じような感じでreturnの型を指定すれば関数コンポーネントとして定義できるのか思いましたができませんでした。

const test2 = (): React.VFC => {
  return (
    <>
      <h1>Hello</h1>
    </>
  );
};

下のコードはできるのになぜ上から2番目のコードはダメなのでしょうか

const test3 = (str: string): string => {
  return "test string";
};

Comments

[hoshi-takanori]

React.VFC は React 要素を返す関数の型です。で、const test: React.VFC = 〜 だと test が関数という意味ですが、const test2 = (): React.VFC => 〜 だと test2 という関数の戻り値が関数ということになってしまいます。

Answer 1

これ

const Test2: React.VFC = (): React.ReactElement => {
  return (
    <>
      <h1>Hello</h1>
    </>
  );
};

やったらエラーにならへんやろ？

っていう説明でOK牧場？