Bug: JSX loses component type definition

[yairopro]

React version: 18.2.0

Steps To Reproduce

1. Create a JSX element of a functional component which has its props with type definitions
2. Create another element of the same component using react's createElement().
3. If you compare the 2 element's types, you'll notice that the one from createElement() has kept a generic ref to the component and extends FunctionComponentElement in this case, while the one using JSX hasn't and is statically just JSX.element.

Link to code example:
https://codesandbox.io/s/jsx-element-loses-types-6nmh3m?file=/src/App.tsx

The current behavior

The element created by JSX don't keep any reference to the component or its props types.

The expected behavior

The element created by JSX should keep any reference to the component or its props types as React.createElement() does.

[MeenuyD]

Hello, @yairopro I think this is the behavior of jsx when using JSX, the element's type is inferred based on the component's type declaration and the props passed to it. However, once the JSX code is transpiled to JavaScript, the type information is not preserved in the resulting JavaScript code. Therefore, the element created using JSX will have a static type of JSX.Element, which does not include specific type information about the component or its props.
when using React's createElement function directly, the type of the element is retained. The createElement function accepts the component type as a generic parameter and can preserve the specific type information. This is why the element created using createElement has a type that extends FunctionComponentElement and includes a reference to the component and its props types.

[yairopro]

Hi @MeenuyD

the element's type is inferred based on the component's type declaration and the props passed to it. However, once the JSX code is transpiled to JavaScript, the type information is not preserved in the resulting JavaScript code.

My issue is before the transpilation. I am talking about the infered type given by vscode during development.

[MeenuyD]

when using JSX syntax, the inferred type for the component may appear as JSX. Element, which is a generic type that represents any JSX element. This happens because the type inference for JSX elements is not as powerful as the type inference for function calls or React.createElement

[yairopro]

Thanks for the clarification MeenuyD.

So what we need is to tell the JSX syntax to use a given function behind (here React.createElement()) in order to let it infer the elements' types, via some configuration of typescript (if such config exists).

If no such feature exists, then we should at least start to open an issue to give this idea to repo responsible for the JSX generated types, which I don't know how to find it.

Any idea how we can make this going further?

[eps1lon]

Closing since this is an issue caused by https://github.com/microsoft/typescript itself. There's probably an issue on their side already. But it generally falls under the category of "no constrained/generic JSX children" in typescript.

[yairopro]

Thanks @eps1lon for the repo.
I've found the original issue, created in 2017 and still opened.
microsoft/TypeScript#14729