Component not always a valid JSX component depending on a generic type

Bug Report

🔎 Search Terms

jsx react generic valid JSX

🕗 Version & Regression Information

• This changed between versions 5.0.4 and 5.1.3

⏯ Playground Link

Playground Link

💻 Code

import * as React from "react";

const A = <T extends unknown>({ a }: { a: T }) => (typeof a === "string" ? null : new Error("a must be a string")) as T extends string ? null : Error;

const jsxWithError = <A<string> a="a" />;

const B = A<string>;

const jsxWithoutError = <B a="a" />;

🙁 Actual behavior

Error on A in jsxWithError:

'A' cannot be used as a JSX component.
  Its type '<T extends unknown>({ a }: { a: T; }) => T extends string ? null : Error' is not a valid JSX element type.
    Type '<T extends unknown>({ a }: { a: T; }) => T extends string ? null : Error' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
      Type 'Error' is not assignable to type 'ReactNode'.(2786)

🙂 Expected behavior

No error with the generic type provided (as is the case for jsxWithoutError), since we are sure we are using a valid JSX component.

TypeScript 5.0.4 と 5.1.3 でリンクされた Playground の例を再現し、A のジェネリックな JSX 使用と B の特殊化された使用を比較します。診断 2786 を追跡し、明示的な型引数を指定したジェネリック形式が受け入れられる一方で、既存のエラーケースが意味のあるものとして維持されることを確認します。