Enable JSX.Element to be checked based on the element type

[thesoftwarephilosopher]

🔍 Search Terms

JSX IntrinsicElements Element

✅ Viability Checklist

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

The docs currently say:

By default the result of a JSX expression is typed as any. You can customize the type by specifying the JSX.Element interface. However, it is not possible to retrieve type information about the element, attributes or children of the JSX from this interface. It is a black box.

This proposal is to somehow allow specifying types so that it can be decided by tsc:

const status = <p class='status' />; // type = HTMLParagraphElement

📃 Motivating Example

The examples on https://vanillajsx.com/ all have assertions like as HTMLParagraphElement.

This change would enable custom JSX libraries easier to specify that "p": HTMLParagraphElement to avoid this.

💻 Use Cases

1. What do you want to use this for?

Iterate on experimental JSX implementations.

2. What shortcomings exist with current approaches?

Explicitly asserting JSX element types.

3. What workarounds are you using in the meantime?

Explicitly asserting JSX element types.

[MartinJohns]

Duplicate of #21699.

[thesoftwarephilosopher]

@MartinJohns I don't think so... I think I just got it working a few minutes ago with JSX.ElementType but I can't repro. But if I can, then this is already solved...

[typescript-bot]

This issue has been marked as "Duplicate" and has seen no recent activity. It has been automatically closed for house-keeping purposes.