Les Notations de Tableaux en TypeScript

Jonathan Atta - Aug 5 - - Dev Community

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"];
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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[]'.
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"];
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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];
Enter fullscreen mode Exit fullscreen mode

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

  • Syntaxe abrégée (T[]) :
let list: number[] = [1, 2, 3];
Enter fullscreen mode Exit fullscreen mode

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

.
Terabox Video Player