TypeScript Academy · Leçon

Tableaux et tuples readonly

Protéger les tableaux et les tuples contre les méthodes de mutation.

Leçon 2 sur 413 étapes

Tableaux et tuples readonly est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Tableaux en lecture seule

Un tableau en lecture seule est un tableau que vous pouvez lire, mais pas modifier. Écrivez-le sous la forme readonly number[] ou, de manière équivalente, ReadonlyArray<number>. Le type des éléments reste identique ; seules les modifications sont interdites.

const nums: readonly number[] = [1, 2, 3];
console.log(nums[0], nums.length);
// nums[0] = 9; // Error: index signature is readonly

Le type ReadonlyArray

ReadonlyArray<T> est la forme générique, identique par sa signification à readonly T[]. Utilisez celle qui se lit le mieux ; elles sont interchangeables.

const names: ReadonlyArray<string> = ['Ada', 'Sam'];
console.log(names.join(', '));

Aucune méthode de modification

Les tableaux en lecture seule n’exposent aucune méthode qui les modifie. push, pop, splice, sort et reverse ne sont pas disponibles — le type ne les possède littéralement pas.

const items: readonly string[] = ['a', 'b'];
// items.push('c'); // Error: push does not exist
// items.splice(0, 1); // Error
console.log(items.length);

Les méthodes sans modification restent disponibles

Les méthodes qui renvoient une nouvelle valeur au lieu de modifier les données — map, filter, concat et slice — restent disponibles. Elles produisent de nouveaux tableaux et laissent l’original intact.

const nums: readonly number[] = [1, 2, 3];
const doubled = nums.map((n) => n * 2);
console.log(doubled); // new array, nums unchanged

Tableaux en lecture seule comme paramètres

Accepter readonly T[] dans une fonction indique que vous ne modifierez pas le tableau de l’appelant. Cela documente l’intention et permet au compilateur de faire respecter cet engagement.

function sum(values: readonly number[]): number {
  return values.reduce((a, b) => a + b, 0);
}
console.log(sum([10, 20, 30]));

Les tableaux modifiables peuvent être affectés aux tableaux en lecture seule

Un number[] ordinaire peut être affecté à un paramètre readonly number[] — vous promettez simplement de ne pas le modifier. L’inverse n’est pas autorisé.

function total(v: readonly number[]): number {
  return v.reduce((a, b) => a + b, 0);
}
const mutable: number[] = [1, 2, 3];
console.log(total(mutable)); // ok

Tuples en lecture seule

Les tuples peuvent également être en lecture seule : readonly [string, number]. Les types et l’ordre des éléments sont fixes, et les positions individuelles ne peuvent pas être réaffectées.

const pair: readonly [string, number] = ['age', 30];
console.log(pair[0], pair[1]);
// pair[1] = 31; // Error: readonly tuple

Les tuples en lecture seule bloquent les modifications

Comme les tableaux en lecture seule, les tuples en lecture seule suppriment les méthodes de modification et refusent l’affectation par index. Ils sont parfaits pour les enregistrements de forme fixe, tels que les paires de coordonnées.

const point: readonly [number, number] = [3, 4];
// point.push(5); // Error
// point[0] = 0; // Error
console.log(point[0] + point[1]);

Assertion de constante et type en lecture seule

Deux moyens d’obtenir des tableaux en lecture seule se distinguent légèrement. Une annotation readonly number[] conserve le type général des éléments. as const va plus loin : elle crée un tuple en lecture seule de types littéraux.

const a: readonly number[] = [1, 2, 3]; // elements: number
const b = [1, 2, 3] as const;            // readonly [1, 2, 3]
console.log(a[0], b[0]);

Choisir entre les deux

Utilisez une annotation readonly T[] lorsque vous voulez l’immuabilité tout en conservant des types d’éléments généraux. Utilisez as const lorsque vous avez également besoin des valeurs littérales exactes, par exemple pour dériver une union.

const DAYS = ['Mon', 'Tue', 'Wed'] as const;
type Day = typeof DAYS[number]; // 'Mon' | 'Tue' | 'Wed'
const d: Day = 'Tue';
console.log(d);

Immuabilité des données partagées

Les tableaux et tuples en lecture seule protègent les constantes partagées et les listes de configuration contre les modifications accidentelles, rendant impossibles à la compilation les bogues dus à une modification inattendue.

const ALLOWED_PORTS: readonly number[] = [80, 443, 8080];
function isAllowed(p: number): boolean {
  return ALLOWED_PORTS.includes(p);
}
console.log(isAllowed(443), isAllowed(22));

Vérification rapide

Vérifiez votre compréhension des tableaux et tuples en lecture seule.

Réponds-y dans la leçon interactive

Récapitulatif : tableaux et tuples en lecture seule

Vous avez appris que :

readonly T[] / ReadonlyArray<T> bloque les modifications, tout en permettant la lecture et l’utilisation de méthodes sans modification.
Les méthodes de modification telles que push/splice sont supprimées du type.
Les tuples en lecture seule fixent à la fois la longueur et les types des éléments.
as const va plus loin en produisant des tuples en lecture seule de types littéraux.

Ensuite, les types de collections en lecture seule.

const config: readonly string[] = ['a', 'b'];
const upper = config.map((s) => s.toUpperCase());
console.log(upper);

Gratuit pour commencer

Apprends TypeScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 101
Leçons: 352

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Tableaux et tuples readonly » est-elle gratuite ?

Oui — le texte complet de « Tableaux et tuples readonly » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Tableaux et tuples readonly » ?

Protéger les tableaux et les tuples contre les méthodes de mutation. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Tableaux et tuples readonly » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à TypeScript Academy