Inferring JSX expression types from the respective JSX function instead of the JSX namespace

[Romich123]

All JSX options except react-native and preserve convert JSX expressions to function calls, so why not treat them as function calls?

The problem

Current JSX requires you to declare a global namespace, which feels outdated. Also, it doesn't support conditional return types.

For example:

// both of them have the same type - JSX.Element
const divEl = <div/>
const inputEl = <input/>

And this behaviour couldn't be changed with the current TS implementation. However, if it was inferred from JSX arguments, just like:

const divEl = document.createElement("div") // is HTMLDivElement
const inputEl = document.createElement("input") // is HTMLInputElement

It could be done very easily with a function like this:

function jsx<T extends JSX.ElementType>(tag: T, props: T extends keyof JSX.IntrinsicElements ? JSX.IntrinsicElements[T] : any, ...children: JSX.Element[]): T extends keyof JSX.ReturnTypes ? JSX.ReturnTypes[T] : JSX.Element

Other reasons

JSX is not only used for browser apps. It can also be used for 3D scene compositions and TUI applications, in both of which elements are usually more complex than in the browser, sometimes requiring a certain type of children.

Transition

I don't think many libraries would work with that right now, so it could be done with some option like this:

{
    "compilerOptions": {
        ...
        "jsxUseFunctionType": true
        ...
    }
}

Most JSX is used after creating a project with a CLI, so every framework/library could set the flag as needed for comfortable use.