TS nampaknya berpendapat bahawa jenis nilai prop terinterpolasi adalah seperti berikut:
{ href: `#234${undefined}2213` }
Bukan rentetan (apabila ia digunakan dalam kesatuan yang boleh dibezakan)?
Taip inferens untuk medan p3 实例会丢失 ev ketiga di bawah, tetapi hanya jika href ialah rentetan esliteral yang diinterpolasi.
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 kotak pasir pembiakan lengkap
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dikemas kini TS5.2+
Pepijat ini telah dibetulkan dalam microsoft/TypeScript#53907, jadi mulai TypeScript 5.2, kod dalam soalan akan berfungsi seperti yang diharapkan tanpa sebarang perubahan.
Gunakan pautan Taman Permainan TS 5.2.0-dev.20230516
Jawapan asal untuk TS5.1-
Ternyataya, ini adalah pepijat dalam TypeScript, seperti microsoft/TypeScript#53888, yang saya serahkan sebagai jawapan kepada soalan Stack Overflow. Pengkompil nampaknya menyedari bahawa atribut diskriminasi
hrefadalah jenisstringdan bukanundefined, tetapi ini berlaku terlalu lewat Masukkan parameter panggil balikhref是string类型，而不是undefined，但这发生得太晚了 根据上下文输入onClickonClickmengikut konteks. Agaknya, interpolasi literal templat sudah cukup untuk menangguhkan perkara yang menyebabkan masalah.Isu GitHub adalah dalam Backlog, yang bermaksud pasukan TS tidak merancang untuk membetulkannya dalam masa terdekat... tetapi oleh itu ia juga ditandakan sebagai Memerlukan Bantuan a>, yang bermaksud mereka akan menerima permintaan tarik daripada ahli komuniti; Oleh itu, sesiapa yang berharap dapat menyelesaikan isu ini secepat mungkin harus mempertimbangkan untuk menyumbang sendiri.
Sementara itu, penyelesaian yang saya cadangkan di sini ialah melakukan interpolasi rentetan lebih awal dan menyimpannya dalam
constsupaya jenisnya diketahui lebih awal:const theHref = `2${undefined}332132`; const p4: ClickableDiscriminatedUnion = { href: theHref, onClick: (ev) => ev.toUpperCase() // okay }Ia menjengkelkan (mungkin lebih menjengkelkan untuk JSX), tetapi sekurang-kurangnya ia berkesan!