グローバル JSX 名前空間が非推奨になった場合、JSX.Element の戻り値の型に代わる正しいものは何ですか?

Question

@types/react では、グローバル JSX 名前空間が非推奨になりました:

リーリー

ESLint の 非推奨/非推奨 ルール (プラグイン eslint-plugin-deprecation から) を有効にしたため、次のような関数コンポーネントの戻り値の型に関するエラーが表示されます。

リーリー

グローバル JSX 名前空間は非推奨になりましたが、この場合、JSX.Element を置き換える正しい戻り値の型は何でしょうか?

非推奨メッセージに記載されているのは React.JSX.Element ですか:

リーリー

または ReactElement は次のようになります:

リーリー

さらに良い方法としては、React.FC を使用して関数コンポーネントを宣言し、次のように TypeScript に戻り値の型を推測させることです。 リーリー

Answer 1

#React.JSX を使用します。

---

または

"react": から JSX をインポートします リーリー

Answer 2

React.ReactElement を直接使用します (より正確には、React.ReactElement | null):

リーリー

これはまさにこれです (推奨されなくなりました) React.FC 適用:

リーリー

これは JSXElementConstructor :

でもあります リーリー

---

そうは言っても、関数コンポーネントの戻り値の型の入力を強制するルールがない限り、簡略化するためにそれを無視できます。

リーリー

どうやら、この関数は何でも返せるようになりました。Typescript は文句を言いません...fb/cra#8177 の場合のように、それを JSX テンプレートの関数コンポーネントとして使用しようとしない限り、 :

リーリー