Pourquoi TypeScript génère-t-il une erreur lors de l'utilisation de « Array.prototype.includes() » avec différents types ?

Pourquoi Array.prototype.includes() nécessite des types correspondants pour les éléments du tableau

La méthode Array.prototype.includes() vise à déterminer si un tableau contient un élément spécifique. Pour garantir des résultats précis et fiables, le paramètre searchElement doit correspondre au type des éléments du tableau. Cette sécurité de type évite les comparaisons erronées et maintient l'intégrité des données du tableau.

Considérez l'extrait de code suivant :

<code class="js">type AllowedChars = 'x' | 'y' | 'z';
const exampleArr: AllowedChars[] = ['x', 'y', 'z'];

function checkKey(e: KeyboardEvent) { 
    if (exampleArr.includes(e.key)) { 
        // ...
    } 
}</code>

Le compilateur TypeScript signale une erreur, indiquant que l'e.key Le paramètre ne correspond pas au type AllowedChars des éléments exampleArr. Cette erreur est due au fait que la méthode include() suppose que searchElement a le même type que les éléments du tableau.

Cela peut sembler contradictoire puisque Array.prototype.includes() renvoie une valeur booléenne plutôt qu'une affectation, comme suggère l'erreur. Cependant, le système de types de TypeScript joue ici un rôle crucial.

L'inclusion d'un élément dans le tableau implique que le type de l'élément est cohérent avec les éléments du tableau. Cependant, dans l'exemple fourni, le type du paramètre e.key est une chaîne, tandis que les éléments exampleArr sont du type AllowedChars. Cette incompatibilité nécessite des assertions de type ou un élargissement de type pour remplacer les attentes du système de types TypeScript.

L'approche la plus simple et la plus recommandée pour résoudre ce problème consiste à élargir le type de exampleArr au type plus large de string[], ou pour restreindre le paramètre searchElement afin d'inclure uniquement les caractères autorisés. Ces modifications garantissent la compatibilité des types, évitant ainsi toute erreur ou incohérence potentielle liée au type.

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!