Les Notations de Tableaux en TypeScript

Jonathan Atta — Mon, 05 Aug 2024 09:09:38 +0000

Une des fonctionnalités de TypeScript est la capacité de définir des types pour les tableaux. Il existe plusieurs manières de définir des tableaux en TypeScript, et chacune a ses particularités.

Array

La syntaxe Array utilise une notation générique pour définir un tableau dont les éléments sont du type T.

let numbers: Array<number> = [1, 2, 3];
let strings: Array<string> = ["a", "b", "c"];

Particulièrement utile pour des types complexes ou maintenir une cohérence dans l'utilisation des génériques dans votre code.

T[]

version abrégée pour déclarer des tableaux. Notation concise, utilisée surtout pour des types simples.

let numbers: number[] = [1, 2, 3];
let strings: string[] = ["a", "b", "c"];

Privilégiée pour sa simplicité et sa facilité de lecture. Idéale pour des déclarations de tableaux simples.

ReadonlyArray

Utilisé pour créer un tableau en lecture seule, empêchant toute modification après sa création, utilisez ReadonlyArray.

let readonlyNumbers: ReadonlyArray<number> = [1, 2, 3];
// readonlyNumbers.push(4); // Erreur : Property 'push' does not exist on type 'readonly number[]'.

Garantis l'immuabilité de vos données.

Les Tuples

Les tuples permettent de définir un tableau avec un nombre fixe d'éléments de types spécifiques.

let tuple: [number, string] = [1, "hello"];

Les tuples ajoutent un niveau de précision supplémentaire en
définissant non seulement le type des éléments, mais aussi leur ordre.

Des Interfaces pour les Tableaux

Vous pouvez également définir une interface pour un tableau avec des propriétés spécifiques. Cela peut être utile pour des cas d'utilisation avancés où vous avez besoin de définir des méthodes ou des propriétés supplémentaires pour vos tableaux.

interface NumberArray {

  sum(): number;
}

let numbers: NumberArray = [1, 2, 3, 4, 5];

numbers.sum = function() {
  return this.reduce((acc, curr) => acc + curr, 0);
};

console.log(numbers.sum()); // Affiche 15

Offre une posibilitée de définir des tableaux avec des comportements personnalisés.

Des Tableaux avec des Types Différents

On peut également définir des tableaux contenant plusieurs types différents. En utilisant des unions de types ou des tuples.

Avec des unions de types :

let mixedArray: (number | string)[] = [1, "two", 3, "four"];

Permet de déclarer un tableau qui peut contenir des éléments de plusieurs types, en utilisant le symbole | pour spécifier les types possibles.

Avec des tuples pour des types spécifiques :

let complexTuple: [number, string, boolean] = [42, "hello", true];

Permet de déclarer un tableau avec un nombre fixe d'éléments de types spécifiques, garantissant que chaque position dans le tableau est d'un type précis.

Comparaison entre Array et T[]

Syntaxe générique (Array) :

let list: Array<number> = [1, 2, 3];

Cette notation est plus explicite lorsque vous travaillez avec des types complexes.

Syntaxe abrégée (T[]) :

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

Cette notation est plus concise pour des types simples. Elle est plus facile à lire et à écrire.

DEV Community: Jonathan Atta