Inconsistent behavior with Generic ElementType

🔎 Search Terms

JSX, Generic ElementType, TS2786

🕗 Version & Regression Information

• Behavior seen in 5.8.3 and 5.9.0-dev.20250703
• I was unable to test this on prior versions

⏯ Playground Link

No response

💻 Code

export namespace dsl {
  export namespace JSX {
    export type Element<U extends string> = {
      name: U
      type: string
      children: Element<string>[]
    }

[tsconfig.json](https://github.com/user-attachments/files/21047590/tsconfig.json)

  export function createElement<const U extends string>(
    tag: JSX.ElementType<U>,
    props : { name: U },
    ...children: JSX.Element<string>[]
  ): JSX.Element<U> {
    return tag(props, ...children)
  }
}

function Form<const U extends string>(props: { name: U }, ...children: dsl.JSX.Element<string>[]) {
    return { ...props, type: "form", children }
}

const formDesugared = dsl.createElement(
  Form, { name: "one" }
)

const form = (
    <Form name="one"/> // <--- Error here, error TS2786: 'Form' cannot be used as a JSX component.
)

🙁 Actual behavior

Compile error:

sui.tsx:31:6 - error TS2786: 'Form' cannot be used as a JSX component.
Its type '(props: { name: U; }, ...children: Element[]) => { type: string; children: Element[]; name: U; }' is not a valid JSX element type.
Types of parameters 'props' and 'props' are incompatible.
Type '{ name: unknown; }' is not assignable to type '{ name: string; }'.
Types of property 'name' are incompatible.
Type 'unknown' is not assignable to type 'string'.

31

🙂 Expected behavior

Changing props: { name: U } in the definition of ElementType to props: { name: string } causes the code to compile [loosing the wanted typing of the resulting Element

Since the desugared version of the code compiles and infers types correctly, I'd expect the JSX code to compile, or at least produce a less deeply mysterious error - the type of the 'name' property plainly isn't unknown.

Additional information about the issue

No response

在 TypeScript 5.8.3 和 5.9 开发版本中，使用链接的 tsconfig.json 重现 .tsx 示例，并比较 JSX 与 dsl.createElement 以及 TS2786 诊断。跟踪 JSX.ElementType 如何检查泛型 Form；完成的标准是 JSX 形式能够与反糖化后的调用一致地编译，保留预期推断出的 Element 类型，并避免误导性的未知名称错误。