Typescript - Components created via JSX "forget"/erase their type

[transbitch]

Describe the bug

When a component is created via JSX, it "forgets"/erases the type of the underlying component and assumes that it's simply a JSX.Element. This is an incorrect assumption when the type that the function is some intersection, e.g. a component that returns JSX.Element & FooTy (see stackblitz).

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-dch5bb?file=src%2FApp.tsx

Steps to Reproduce the Bug or Issue

const FooSymbol = Symbol('Foo');

type FooTy = {
  __foo: typeof FooSymbol;
};

// Returns JSX.Element & FooTy (hover over `Foo`)
const Foo = () => {
  return (<>Foo</>) as JSX.Element & FooTy;
};

// Returns JSX Element!!! (not JSX.Element & FooTy as desired)
const App = () => {
  return <Foo />;
};

Expected behavior

<Foo /> should have the same type as Foo().

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Firefox
• Version: 1.7.6

Additional context

No response

[ryansolid]

I'm pretty sure this is a TypeScript-ism that we can't change. It is just how JSX in typescript work. But I'd love to shown otherwise.

[transbitch]

I'm pretty sure this is a TypeScript-ism that we can't change. It is just how JSX in typescript work. But I'd love to shown otherwise.

You're totally right, I just looked it up, it's an issue with typescript. React hasn't figured it out either.. Closing as this is blocked by a TS issue open since 2017.

[ryansolid]

Yeah I think we could benefit from this even more than React given we can have real DOM element types. Anyway, all good. This issue can be a reference for the next person who comes along.