Comment déclarer un tableau (array) contenant une liste d'objets avec Angular ?
Depuis sa version 2, le framework Angular a été réécrit avec le langage TypeScript. C'est donc ce dernier qui est conseillé pour écrire son application, même si le langage JavaScript fonctionne toujours. TypeScript utilise un typage fort, on ne peut pas simplement déclarer des variables sans types comme on peut le faire en JavaScript. Il faut également respecter des étapes pour déclarer un tableau d'objets. Plusieurs solutions sont possibles.
Le mot-clé "type" permet de déclarer un nouveau type. On peut utiliser cette directive afin de déclarer précisément son tableau d'objets. Il faut à l'intérieur du tableau déclarer chaque propriété avec le type de celle-ci.
type classeVoiture = Array<{identifiant: number, libelle: string}>;
Vous pouvez ensuite utiliser ce type pour déclarer le tableau.
const mesVoitures: classeVoiture = [
{identifiant: 1, text: 'Berline'},
{identifiant: 2, text: 'Break'},
{identifiant: 3, text: 'Coupé'}
];
Il est possible de raccourcir la notation en une seule ligne. Il faut pour cela préciser directement le type dans le tableau au lieu de le lier à un type. Cette notation est utile si l'on ne souhaite pas réutiliser le type dans une autre variable.
const mesVoitures: Array<{identifiant: number, libelle: string}> = [
{identifiant: 1, text: 'Berline'},
{identifiant: 2, text: 'Break'},
{identifiant: 3, text: 'Coupé'},
];
Une autre solution consiste à utiliser les interfaces, l'un des ajouts du langage TypeScript par rapport au JavaScript. Les interfaces permettent de décrire un type d'objet spécifique en indiquant les propriétés requises. On peut ensuite déclarer un tableau contenant des objets utilisant cette interface.
export interface classeVoiture{
identifiant:number;
libelle:string;
}
public mesVoitures:classeVoiture[] = [
{identifiant: 1, text: 'Berline'},
{identifiant: 2, text: 'Break'},
{identifiant: 3, text: 'Coupé'},
];