Une version réécrite de ce titre pourrait être : Est-ce un bug dans TypeScript (l'eslittéral interpolé n'est pas reconnu comme un type de chaîne)

Question

TS semble penser que le type de valeur d'accessoire interpolée est le suivant :

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

Pas de chaînes (quand elles sont utilisées dans des unions distinctes) ?

Tapez l'inférence pour le troisième p3 实例会丢失 ev champ ci-dessous, mais seulement si href est une chaîne eslittérale interpolée.

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
}

Reproduction complète du bac à sable TS

Answer 1

Mise à jour TS5.2+

Ce bug a été corrigé dans microsoft/TypeScript#53907, donc à partir de TypeScript 5.2, le code dans la question fonctionnera comme prévu sans aucune modification.

Utilisez le lien Playground de TS 5.2.0-dev.20230516

---

Réponse originale pour TS5.1-

Il s'avère queoui, il s'agit d'un bug dans TypeScript, comme microsoft/TypeScript#53888, que j'ai soumis en réponse à une question Stack Overflow. Le compilateur semble reconnaître que l'attribut discrimination href est de type string et non undefined, mais cela arrive trop tard Entrez le paramètre de rappel href是 string 类型，而不是 undefined，但这发生得太晚了 根据上下文输入 onClick onClick en fonction du contexte. Vraisemblablement, l'interpolation littérale du modèle est suffisante pour retarder les choses qui causent des problèmes. Le problème GitHub est dans le

Backlog

, ce qui signifie que l'équipe TS ne prévoit pas de le résoudre de sitôt... mais il est donc également marqué comme Besoin d'aide, ce qui signifie qu'elle acceptera les demandes d'extraction des membres de la communauté ; Par conséquent, toute personne souhaitant résoudre ce problème le plus rapidement possible devrait envisager de contribuer elle-même à un correctif. a>En attendant, la solution de contournement que je suggère ici est d'effectuer l'interpolation de chaîne à l'avance et de la stocker dans

afin que son type soit connu à l'avance :

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

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

constC'est ennuyeux (probablement encore plus ennuyeux pour JSX), mais au moins ça marche !