TS7026 when using JSX factory from a variable rather than import

オープン
#45,741 コメント 4 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
4/5
見積もり時間
3〜5日
初心者へのやさしさ
45/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
停滞
技術スタック
javascript, typescript
領域
compilers

調査の方向性

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

索引モデルが issue の本文から書いたものです。

説明

Domain: JSX/TSX In Discussion Suggestion

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.

主要言語
Go
スター
111k
フォーク
14.4k
平均マージ
1日 19時間
マージ済み PR（30日）
117

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

microsoft/TypeScript のほかの issue

microsoft/TypeScript の issue をすべて見る

似ている issue

Go の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。