Leçons du module (2/2)
Tableaux et Tuples
En JavaScript, les tableaux peuvent contenir n'importe quel type d'élément et peuvent s'agrandir ou rétrécir de manière totalement dynamique. TypeScript ajoute le contrôle statique des types pour garantir que les collections restent homogènes ou respectent une structure de types fixe.
Tableaux (Collections Homogènes)
En TypeScript, il existe deux manières équivalentes de définir le type d'un tableau contenant des éléments du même type :
-
Utiliser le type de l'élément suivi de crochets (
[]) :TSconst numbers: number[] = [1, 2, 3]; const strings: string[] = ['a', 'b', 'c']; -
Utiliser le type générique
Array<T>:TSconst numbers: Array<number> = [1, 2, 3];
Les deux syntaxes sont parfaitement valides, mais la première (type[]) est la plus conventionnelle et la plus courante dans presque tous les projets. Si vous essayez d'insérer une valeur invalide (ex. numbers.push("hello") sur un tableau de type number[]), TypeScript générera une erreur au moment de la compilation.
Les Tuples (Structures à taille fixe)
Un tuple est un type spécial de tableau qui a un nombre fixe d'éléments et dans lequel chaque élément a un type spécifique prédéfini en fonction de sa position exacte.
Par exemple, si nous voulons stocker une réponse HTTP composée d'un code de statut (nombre) et d'un message (chaîne) :
const response: [number, string] = [200, 'OK'];Dans ce cas :
- Le premier élément (
response[0]) doit être unnumber. - Le deuxième élément (
response[1]) doit être unestring. - Le tableau doit être initialisé avec exactement 2 éléments.
Tuples en Lecture Seule (readonly)
Un détail important sur les tuples en TypeScript est qu'au moment de l'exécution, ce sont de simples tableaux JavaScript normaux. Cela signifie que des méthodes comme .push() ou .pop() sont techniquement disponibles et pourraient altérer la longueur du tuple, contournant partiellement les contrôles de type.
Pour éviter ce comportement et garantir une réelle immutabilité, nous pouvons utiliser le modificateur readonly :
const point: readonly [number, number] = [10, 20];
// point.push(30); // Errore a tempo di compilazione!À toi de jouer
Exercice 1 : Tableau de Nombres
Déclare un tableau nommé scores qui ne contient que des nombres et est initialisé avec les valeurs 90, 85 et 95. Utilise l'annotation de type explicite pour ce tableau. N'utilise pas le type any.
Afficher l'indice
Utilise la syntaxe const scores: number[] = ... ou Array<number>.
Solution disponible après 3 tentatives
Exercice 2 : Tuple Coordonnées 3D
Déclare un tuple nommé point qui représente une coordonnée 3D (trois nombres pour X, Y, Z) et est initialisé avec les valeurs 10, 20, 30. Utilise l'annotation de type explicite.
Afficher l'indice
Le type du tuple doit être [number, number, number].
Solution disponible après 3 tentatives
Exercice 3 : Tuple Informations de Position
Déclare un tuple nommé locationInfo qui représente une coordonnée géographique avec son nom. Il doit contenir : latitude (nombre), longitude (nombre) et nom de la ville (chaîne). Initialise-le avec les valeurs 41.9028, 12.4964 et 'Rome'.
Afficher l'indice
Utilise la syntaxe pour définir un tuple avec trois éléments : [number, number, string].
Solution disponible après 3 tentatives
Exercice 4 : Tuple Ligne de Log
Déclare un tuple nommé logEntry qui représente une ligne de journal (log). Il doit contenir dans l'ordre : un timestamp (nombre), un niveau de sévérité (chaîne) et un message d'erreur (chaîne). Initialise-le avec le timestamp 1716300000, le niveau 'INFO' et le message 'Application started'.
Afficher l'indice
Utilise la syntaxe pour définir un tuple de trois éléments : [number, string, string] et attribue les valeurs indiquées.
Solution disponible après 3 tentatives