Configuring JSX Namespace to Prioritize IntrinsicElements, Fallback to a Generic Element Type

[covert narwhal]

I'm currently working on a custom JSX renderer detached from React or Preact or anything like that. I'm currently trying to setup both intrinsic elements while also supporting custom ones.

const testText = <text hi={true}>test</text>;
type TextType = typeof testText;

In Intellisense, hovering over <text> returns the correct (property) JSX.IntrinsicElements.text: CustomTextElement

However, the testText variable returns any when I would like it to either be CustomBaseElement or that same CustomTextElement

I've setup tsconfig.json to use my custom jsx.d.ts/jsx-runtime.ts

"jsx": "react-jsx",
"jsxImportSource": "mymodule",

I'm aware of setting the Element type in the JSX namespace

declare global {
  namespace JSX {
    interface IntrinsicElements {
      ...
      text: CustomTextElement;
      ...
    }
    type Element = CustomBaseElement; // <--- THIS
  }
}

and this does solve the problem, but it also turns the CustomTextElement <text> into a less-specific CustomBaseElement when I'm trying to achieve both -- that is, it'll prefer IntrinsicElements but otherwise use that CustomBaseElement instead of any (and type that testtext variable correctly)

Is this possible?

[reef lily]

@covert narwhal I don't think there's a way to get specific types out of JSX expressions.

React has the same issue: <div /> is typed as React.JSX.Element, not some more specific type that indicates that it's a div

[covert narwhal]

Gotcha - so you can't restrict elements passed as arguments to functions or as children - that's unfortunate, but thanks for confirming @reef lily - is there an issue around this I can follow?

[covert narwhal]

https://github.com/microsoft/TypeScript/issues/14729
https://github.com/facebook/react/issues/26934
for those who find this later