TS 似乎認(rèn)為插值 prop 值的類型如下：
{ href: `#234${undefined}2213` }
不是字串（當(dāng)它們?cè)诳蓞^(qū)分聯(lián)合中使用時(shí)）？
下面的第三個(gè) p3 實(shí)例會(huì)遺失 ev 欄位的型別推斷，但僅當(dāng) href 是內(nèi)插的 esliteral 字串時(shí)。
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沙盒完整重現(xiàn)
1
0
0
更新 TS5.2
此錯(cuò)誤已在 microsoft/TypeScript#53907 中修復(fù)，因此從TypeScript 5.2，問題中的程式碼將按需要工作，無需任何變更。
使用 TS 5.2.0-dev.20230516 的 Playground 連結(jié)
TS5.1 的原始答案-
事實(shí)證明是的，這是 TypeScript 中的一個(gè)錯(cuò)誤，如 microsoft/TypeScript#53888，這是我為了回答 Stack Overflow 問題而提交的。編譯器似乎認(rèn)知到判別 屬性href是string 類型，而不是undefined，但這發(fā)生得太晚了根據(jù)上下文輸入 onClick 回呼參數(shù)。據(jù)推測(cè)，模板文字插值足以延遲事情導(dǎo)致問題。
GitHub 問題位於Backlog 中，這意味著TS 團(tuán)隊(duì)不計(jì)劃盡快修復(fù)它......但因此它也被標(biāo)記為需要幫助 a>，這意味著他們將接受社區(qū)成員的拉取請(qǐng)求；因此，任何希望盡快解決此問題的人都應(yīng)該考慮自己貢獻(xiàn)修復(fù)程序。
同時(shí)，我在這裡建議的解決方法是提前進(jìn)行字串插值並將其儲(chǔ)存在 const 中，以便提前知道其類型：
const theHref = `2${undefined}332132`;
const p4: ClickableDiscriminatedUnion = {
href: theHref,
onClick: (ev) => ev.toUpperCase() // okay
}
這很煩人（對(duì) JSX 來說可能更煩人），但至少它有效！
