Confusion sur l'inférence de type dactylographié: Pourquoi les définitions des types de valeur de retour des quatre fonctions sont-elles les mêmes et comment éviter les erreurs de type dans le scénario de type Union?

Explorez profondément les subtilités de l'inférence de type dactylographié: l'équivalence de la définition du type de valeur de retour des quatre fonctions et la sécurité du type sous le type Union

Cet article analyse profondément le mécanisme d'inférence du type de typeScript, explique comment les définitions de type de fonction apparemment différentes peuvent obtenir le même résultat et résout les erreurs de type dans le scénario de type conjoint.

Tout d'abord, nous observons quatre types de définitions getReturnType :

 Tapez getreTurnType1<t> = T s'étend (... args: jamais) => inférer r? R: Jamais;
Tapez getreTurnType2<t> = T s'étend (... args: jamais []) => inférer r? R: Jamais;
Tapez getreTurnType3<t> = T s'étend (... args: tout []) => inférieur r? R: Jamais;
Tapez getreTurnType4<t> = T s'étend (... args: tout) => inférieur r? R: Jamais;</t></t></t></t>

Les quatre définitions de type sont conçues pour extraire le type de valeur de retour à partir du type de fonction. Bien que les types de paramètres ( never , never[] , any[] , any ) soient différents, ils n'ont aucun effet sur le résultat de l'inférence du type R de retour dans le type d'inférence. Le mot clé extends se concentre sur la structure des types de fonctions, et non sur les types spécifiques de paramètres. Tant que le type de fonction correspond, infer R peut déduire correctement le type de valeur de retour. Par conséquent, ces quatre définitions sont en fait équivalentes.

Ensuite, nous analysons un morceau de code qui montre les erreurs de type qui peuvent se produire lorsque le type d'union et le type conditionnel sont combinés:

 Type d'accessoires<t extends major rescategorylabel> = {
  Étiquettes: t [];
  SetSelect: (Index: numéro, étiquette: t étend majeur? Major: RescategoryLabel) => void;
  xxx: tout; // D'autres attributs sont omis};

const changeselect = (
  Index: numéro,
  Étiquette: Major | RescategoryLabel,
  E: react.Mousevent<htmlanchorelement> | React.touchevent<htmlanchorelement>
) => {
  setSelect (index, label);
  activeTaBtocentter (e.CurrentTarget comme htmlement);
};</htmlanchorelement></htmlanchorelement></t>

Il y a un problème avec l'inférence de type de l' label paramètre de fonction setSelect dans la définition de type Props . Le type conditionnel T extends Major ? Major : ResCategoryLabel tente de déterminer le type d' label en fonction du type de T Cependant, puisque T est un type conjoint de Major | ResCategoryLabel , lorsque le type réel de T est inconnu, le compilateur ne peut pas déterminer si T est Major ou ResCategoryLabel , ce qui entraîne l'échec de label . Le problème n'est pas le type conditionnel lui-même, mais son application dans le contexte du type d'union.

La solution consiste à utiliser Major | ResCategoryLabel directement comme type d' label :

 Type d'accessoires<t extends major rescategorylabel> = {
  Étiquettes: t [];
  SetSelect: (Index: numéro, étiquette: Major | RescategoryLabel) => void;
  xxx: tout; // D'autres attributs sont omis};</t>

De cette façon, les types de paramètres de setSelect sont clairs, évitant les erreurs de type et améliorant la lisibilité et la maintenabilité du code. Cela reflète la nécessité d'abandonner le contrôle de type raffiné apporté par des types conditionnels lorsqu'il s'agit de types de joints en échange de définitions de type plus claire et plus sûres.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!