Tableaux d'objets en TypeScript : guide complet avec exemples

Tableaux d'objets en TypeScript : tutoriel pas à pas pour ceux qui en ont assez des erreurs

Avez-vous déjà écrit du TypeScript et soudainement reçu un soulignement rouge de l'IDE en essayant d'ajouter un objet à un tableau ? Cela vous dit quelque chose, n'est-ce pas ? La question "How can I define an array of objects?" est l'une des plus populaires sur Stack Overflow. Et pour cause : sans un typage correct des tableaux d'objets, votre code devient une source de bugs et de maux de tête.

Dans ce tutoriel, nous allons passer en revue toutes les façons de définir un tableau d'objets en TypeScript, des plus simples aux plus avancées. Vous apprendrez à éviter les erreurs courantes, à utiliser les interfaces et à rendre votre code non seulement fonctionnel, mais aussi élégant. C'est parti !

Pourquoi un simple [] ne fonctionne-t-il pas ?

Supposons que vous écriviez :

let users = [];

TypeScript interprète cela comme never[] — un tableau qui ne devrait jamais contenir d'éléments. Essayez d'y ajouter un objet :

users.push({ name: 'Анна', age: 25 }); // Erreur !

L'IDE criera : "Argument of type '{ name: string; age: number; }' is not assignable to parameter of type 'never'." TypeScript ne sait pas ce que vous comptez stocker dans le tableau, il bloque donc toute tentative d'ajout.

La solution est de spécifier explicitement le type du tableau. Examinons toutes les options.

Méthode 1 : Annotation de type de base — crochets

La manière la plus simple et intuitive est d'utiliser la syntaxe Type[] :

let users: { name: string; age: number }[] = [];\n\nusers.push({ name: 'Анна', age: 25 }); // ✅ Fonctionne\nusers.push({ name: 'Иван', age: 30 }); // ✅ Fonctionne\n

Ici, nous disons à TypeScript : "Hé, c'est un tableau d'objets, chacun ayant les propriétés name (chaîne) et age (nombre)". L'IDE est maintenant satisfait, l'autocomplétion fonctionne, et les erreurs de type sont détectées à la compilation.

Inconvénient : si la structure de l'objet est complexe, la description directement dans l'annotation devient lourde. Pour ces cas, les interfaces ont été créées.

Méthode 2 : Les interfaces — votre meilleur ami

Les interfaces permettent d'extraire la description de l'objet dans une entité distincte et de la réutiliser. Cela rend le code plus propre et plus clair :

interface User {\n  id: number;\n  name: string;\n  age: number;\n  email?: string; // propriété facultative\n}\n\nlet users: User[] = [];\n\nusers.push({ id: 1, name: 'Анна', age: 25 });\nusers.push({ id: 2, name: 'Иван', age: 30, email: 'ivan@example.com' }); // ✅\n

Maintenant, si vous essayez d'ajouter un objet sans le champ id ou avec un type incorrect, TypeScript générera une erreur. Les interfaces sont particulièrement utiles lorsque le même type d'objet est utilisé à plusieurs endroits.

Et qu'en est-il de type ?

Au lieu de interface, vous pouvez utiliser type :

type User = {\n  id: number;\n  name: string;\n  age: number;\n};\n\nlet users: User[] = [];

La différence entre interface et type est un sujet pour un article séparé. Pour les tableaux d'objets, les deux options peuvent être utilisées, mais interface est plus souvent employée pour décrire des formes d'objets.

Méthode 3 : Syntaxe générique Array<Type>

Une autre façon est d'utiliser les génériques :

let users: Array<{ name: string; age: number }> = [];\n\n// Ou avec une interface :\nlet users: Array<User> = [];\n

Les deux syntaxes (Type[] et Array<Type>) fonctionnent de la même manière. Le choix est une question de goût et de contexte. Personnellement, je préfère Type[] pour les types simples et Array<Type> pour les constructions génériques complexes. Mais l'important est d'être cohérent dans le projet.

Méthode 4 : Création d'un tableau avec des objets initiaux

Souvent, il ne suffit pas de déclarer un tableau, il faut aussi le remplir immédiatement avec des données. TypeScr