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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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
Backloghrefest de typestringet nonundefined, mais cela arrive trop tard Entrez le paramètre de rappelhref是string类型，而不是undefined，但这发生得太晚了 根据上下文输入onClickonClicken 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, 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 !