microsoft / microsoft/TypeScript

Inconsistent behavior with Generic ElementType

Offen
#61,995 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Domain: JSX/TSX Help Wanted Possible Improvement
Vorherrschende Sprache
Go
Sterne
111k
Forks
14.3k
Ø Merge
2 T. 4 Std.
Gemergte PRs (30 T.)
132

Beschreibung

### 🔎 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

```ts
export namespace dsl {
export namespace JSX {
export type Element = {
name: U
type: string
children: Element[]
}

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

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

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

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

const form = (
// <--- 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_

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Reproduziere das .tsx-Beispiel mit der verknüpften tsconfig.json unter TypeScript 5.8.3 und der Entwicklungsversion 5.9, wobei JSX mit dsl.createElement und der Diagnose TS2786 verglichen wird. Verfolge, wie JSX.ElementType das generische Form überprüft; abgeschlossen ist die Aufgabe, wenn die JSX-Form konsistent mit dem desugared Aufruf kompiliert, die beabsichtigte inferierte Element-Typisierung beibehält und den irreführenden Fehler wegen eines unbekannten Namens vermeidet.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
compilers
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.