這個標題的重寫版本可以是：Is this a bug in TypeScript? (Interpolated esliteral not being recognized as a string type)

Question

TS 似乎認為插值 prop 值的類型如下：

{ href: `#234${undefined}2213` }

不是字串（當它們在可區分聯合中使用時）？

下面的第三個 p3 實例會遺失 ev 欄位的型別推斷，但僅當 href 是內插的 esliteral 字串時。

type BiomePlainLinkProps = {
  href: string;
  onClick?: (event: string) => void;
}

type BiomeButtonProps = {
  href?: never;
  onClick?: (event: number) => void;
}

export type ClickableDiscriminatedUnion =
  | BiomePlainLinkProps
  | BiomeButtonProps;

const p1: ClickableDiscriminatedUnion = {
  href: '2332132',
  onClick: (ev) => console.log('@@@@', ev), // ev is string here
}

const p2: ClickableDiscriminatedUnion = {
  onClick: (ev) => console.log('@@@@', ev), // ev is number here
}

const p3: ClickableDiscriminatedUnion = {
  href: `2${undefined}332132`,
  onClick: (ev) => console.log('@@@@', ev), // ev is any (not string) here
}

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 問題而提交的。編譯器似乎認知到判別 屬性href是string 類型，而不是undefined，但這發生得太晚了根據上下文輸入 onClick 回呼參數。據推測，模板文字插值足以延遲事情導致問題。

GitHub 問題位於Backlog 中，這意味著TS 團隊不計劃盡快修復它......但因此它也被標記為需要幫助 a>，這意味著他們將接受社區成員的拉取請求；因此，任何希望盡快解決此問題的人都應該考慮自己貢獻修復程序。

同時，我在這裡建議的解決方法是提前進行字串插值並將其儲存在 const 中，以便提前知道其類型：

const theHref = `2${undefined}332132`;

const p4: ClickableDiscriminatedUnion = {
  href: theHref,
  onClick: (ev) => ev.toUpperCase()  // okay
}

這很煩人（對 JSX 來說可能更煩人），但至少它有效！