TS7026 when using JSX factory from a variable rather than import

Bug Report

🔎 Search Terms

TS7026: JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.

🕗 Version & Regression Information

• This is the behaviour in every version I tried, and I reviewed the FAQ for entries about JSX and React

⏯ Playground Link

https://codesandbox.io/s/dank-wood-cqpld?file=/src/index.tsx

💻 Code

// helping typescript to figure out the types by defining
// the return type as ...
function getPreact(): typeof import("preact") {
	// imagine that this function doesn't call require()
	// but rather uses some dynamic import, which returns
	// the same export that this call would do:
	return require("preact");
}

const { h, render } = getPreact();

function App() {
	return <div>Hello, world!</div>;
}

render(<App />, document.getElementById("app")!);

🙁 Actual behaviour

TypeScript ignores the h in the scope and errors out any vanilla JSX code because ‘no JSX.IntrinsicElements exist’. Yet it works flawlessly if you compile it ignoring types using, say, Babel. It seems that it also works correctly if you use raw h call instead of JSX.

🙂 Expected behaviour

TypeScript would be smart to figure out that h in scope is a factory method that it needs, as set by configuration (even though it's ‘imported’ weirdly) and use provided by it JSX to find IntrinsicElements and be happy with it.

リンクされたCodeSandboxの再現から始め、hをgetPreact()から分割代入する場合と直接インポートする場合のJSXチェックを比較します。TypeScriptがJSX factoryをどのように識別し、JSX.IntrinsicElementsを解決するかを追跡します。変数ベースのfactoryがTS7026なしでJSXを受け入れ、既存の直接インポートの動作を維持できれば完了です。