Versi yang ditulis semula bagi tajuk ini mungkin: Adakah ini pepijat dalam TypeScript (Esliteral interpolasi tidak dikenali sebagai jenis rentetan)
P粉015402013
P粉015402013 2024-03-30 08:37:56
0
1
482

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

P粉015402013
P粉015402013

membalas semua(1)
P粉617597173

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 hrefstring 类型,而不是 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!

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!