このタイトルの書き換えバージョンは次のようになります: これは TypeScript のバグですか? (補間されたエスリテラルが文字列型として認識されない)

Question

TS は補間された prop 値の型が次のように考えているようです:

リーリー

は文字列ではありません (区別可能な共用体で使用されている場合)?

以下の 3 番目の p3 インスタンスでは、ev フィールドの型推論が失われますが、これは href が補間されたエスリテラル文字列である場合に限られます。

リーリー

TSサンドボックス完全再現

Answer 1

アップデート TS5.2

このバグは microsoft/TypeScript#53907 で修正されているため、TypeScript 5.2 以降、質問内のコードは変更を加えることなく期待どおりに動作します。

TS 5.2.0-dev.20230516

の Playground リンクを使用します。

---

TS5.1の元の回答-

結局のところ、はい、これは TypeScript (microsoft/TypeScript#53888 として) のバグであり、私が Stack Overflow の質問に答えて提出したものです。コンパイラーは、discrimination 属性 href が unknown ではなく string 型であることを認識しているようですが、これは遅すぎますコンテキストに基づいて onClick コールバック パラメーターを入力します。おそらく、テンプレート リテラル補間は、問題の原因となるものを遅らせるのに十分です。

GitHub の問題は バックログ にあります。これは、TS チームがすぐに修正する予定がないことを意味します...しかし、そのため、Needs Help a> としてもマークされています。これは、コミュニティ メンバーからのプル リクエストを受け入れることを意味するため、この問題をできるだけ早く解決したいと考えている人は、自分で修正を提供することを検討する必要があります。

一方、ここで私が提案する回避策は、事前に文字列補間を実行し、それを const に格納して、その型が事前に分かるようにすることです。 リーリー

これは面倒ですが (おそらく JSX の場合はさらに面倒です)、少なくとも機能します。