TypeScript + Reactでpropsに特定のコンポーネントの型を指定する

Question

聞きたいこと

TypeScriptとReactでWeb開発をしています。
コンポーネントAのpropsでコンポーネントBの方を指定して、コンポーネントB型のコンポーネントしか受け取らないようにしたいと思っています。

例えば、下のような感じです。

type AProps = {
  hoge: ReactElement<typeof B>;
};

const A: React.FC<AProps> = (props) => {

  :

  return (
  )

}

const B = () => {

  :

  return (
  )

}

ただ、このサイト を見てみると、下のようにかけるような記述があります。

type AProps = {
  hoge: ReactElement<B>;
};

実際に上のように書いてみると、下のエラーになります。

TS2749: 'B' refers to a value, but is being used as a type here. Did you mean 'typeof B'?

これは誤植なのでしょうか。

Comments

[m.ts10806]

回答依頼いただきましたが、
React.js、TypeScript両方とも未経験です。
依頼される際は該当タグのスコアは気にされたほうが良いと思います。
たまたま質問数が多いタグへの回答を頑張ってることでそれなりのスコアがありますが、万能ではありません。

Answer 1

たぶん、誤植ではありません。TypeScriptにおけるclassは、暗黙的のうちにinterface型を作成し、型として使用できます。したがって以下はエラーになりません。

これは他の静的型言語を経験している人からすれば奇妙なことに思えるかもしれません。

class MyAwesomeComponent extends React.Component {
  render() {
    return <div>こんにちは</div>;
  }
}

const foo: React.ReactElement<MyAwesomeComponent> = <MyAwesomeComponent />; // Okay
const bar: React.ReactElement<MyAwesomeComponent> = <NotMyAwesomeComponent />; // Error!

class Point {
  x?: number
  y?: number;
}

let point: Point = { x: 1, y: 2 };

ref: https://www.typescriptlang.org/docs/handbook/classes.html#using-a-class-as-an-interface

対して関数コンポーネントは関数なので型を作りません。

ただし、注意点があり、このDeepDive日本語版がいつ書かれたのかわかりませんが、ReactElementという型はかなりゆるく定義されているので、このサイトで期待されているような型エラーは発生しないのではないかと思います。(未定義を警告するエラーは発生するでしょうけど...)

質問者さんが行いたい、Elementの型を制限する、はドキュメントある通りTypeScript(静的チェック時)には難しいので、ランタイム時にコンポーネントのtypeなどでバリデーションするしかないのではないかと思っています。

// ランタイム時にコンポーネントのtypeの値が取得できます↓
    if (foo.type === 'xxx') {

    } else {
        
    }