Versi yang ditulis semula bagi tajuk ini mungkin: Adakah ini pepijat dalam TypeScript (Esliteral interpolasi tidak dikenali sebagai jenis rentetan)

Question

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

Answer 1

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 href adalah jenis string dan bukan undefined, tetapi ini berlaku terlalu lewat Masukkan parameter panggil balik href是 string 类型，而不是 undefined，但这发生得太晚了 根据上下文输入 onClick onClick mengikut 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 const supaya 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!