ProgrammationDéveloppeur Frontend / Développeur TypeScript

Comment la typage strict des tableaux et des tuples est-il implémenté et pourquoi est-il utilisé dans TypeScript ? Quelles sont leurs différences et les pièges à éviter lors de leur utilisation ?

Réussissez les entretiens avec l'assistant IA Hintsage

Réponse

Dans TypeScript, les tableaux peuvent être typés strictement en spécifiant le type des éléments via type[] ou Array<type>. Par exemple :

let arr: number[] = [1, 2, 3];

Les tuples sont des tableaux de longueur fixe avec des types pour chaque élément :

let tuple: [string, number] = ["age", 30];
  • Tableau : autorise n'importe quel nombre d'éléments du même type.
  • Tuple : fixe rigoureusement le nombre et l'ordre des types. Permet de créer des structures similaires à des enregistrements ou de retourner des valeurs de types différents d'une fonction.

Pièges :

  • Lors de l'utilisation des méthodes de tableau (push, pop) sur des tuples, push n'est pas interdit, mais le résultat sort déjà des limites de typage garanties.
  • L'extension imprudente d'un tuple entraîne un code "non sécurisé".
  • La déstructuration de tuples dans des fonctions : un type ou une longueur mal spécifiés entraînera une erreur.

Question piège

Les tuples en TypeScript peuvent-ils contenir un nombre variable d'éléments, et comment cela affectera-t-il la typage ?

Réponse : Oui, les tuples peuvent contenir des éléments restants en utilisant la syntaxe ..., mais exigent toujours un typage strict pour les éléments restants :

let tuple: [string, ...number[]] = ["id", 10, 20, 30];

Cependant, les éléments avant ... doivent être spécifiés, et le type pour le reste du tableau doit être unique.

Exemples d'erreurs réelles dues à l'ignorance des subtilités du sujet


Histoire

Dans un projet e-commerce, un développeur a essayé de sauvegarder plus de deux éléments dans un tuple [string, number] en utilisant push. Cela n'a pas généré d'erreur lors de la compilation, mais a cassé le fonctionnement d'une fonction qui attendait exactement deux éléments, ce qui a conduit à des erreurs lors du traitement des commandes.


Histoire

La fonction retournait un tuple [string, number], mais le consommateur s'attendait à un tableau de chaînes. La non-correspondance des types a causé une erreur difficile à détecter, ce qui a conduit à l'envoi de valeurs incorrectes en production.


Histoire

Lors de la migration du code de JavaScript vers TypeScript, des tableaux ont été utilisés à la place des tuples pour retourner plusieurs valeurs de différents types. Cela a violé le typage strict et a conduit à l'apparition de bugs dans le code subséquent qui se basait sur l'ordre et le type des valeurs.