I’m using custom JSX builder and renderer, and would like to avoid using global JSX namespace.

Example below playground would fail, how to make it work?

The TypeScript docs say the h.JSX will be picked up instead of the global.JSX, but it doesn’t work, quote from TS docs:

The factory chosen will also affect where the JSX namespace is looked up (for type checking information) before falling back to the global one.

If the factory is defined as React.createElement (the default), the compiler will check for React.JSX before checking for a global JSX. If the factory is defined as h, it will check for h.JSX before a global JSX.

/** @jsx h */

interface ElBuilder {
  (tag: any, attrs: Record<string, any> | null, ...content: any[]): any
  JSX(tag: any, attrs: Record<string, any> | null, ...content: any[]): any
}

const h: ElBuilder = function(tag, attrs, ...content) {
  console.log('h', tag, attrs, content)
}
h.JSX = h

console.log(<div></div>)
// ^Error: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)