TypeScript Academy · Leçon

ReadonlyArray et ReadonlyMap

Utiliser les types de collections readonly intégrés.

ReadonlyArray et ReadonlyMap est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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.

Types de collections en lecture seule

Au-delà des tableaux, TypeScript fournit des variantes en lecture seule de ses collections intégrées : ReadonlyArray<T>, ReadonlyMap<K, V> et ReadonlySet<T>. Chacune n'expose que les parties non mutantes de son interface.

const arr: ReadonlyArray<number> = [1, 2, 3];
console.log(arr.length, arr.includes(2));

Récapitulatif de ReadonlyArray

ReadonlyArray<T> autorise le parcours, l'accès par index et des méthodes comme map et filter, mais pas push, pop ni l'affectation d'un index. C'est la forme tableau de la famille en lecture seule.

const tags: ReadonlyArray<string> = ['ts', 'js'];
console.log(tags.map((t) => t.toUpperCase()));
// tags.push('css'); // Error

ReadonlyMap

ReadonlyMap<K, V> permet de rechercher des valeurs, de parcourir la collection et de vérifier les clés, mais ne propose pas set, delete ni clear. Du point de vue de l'utilisateur, le contenu de la collection est fixe.

const ages: ReadonlyMap<string, number> = new Map([['Ada', 30], ['Sam', 25]]);
console.log(ages.get('Ada'), ages.has('Sam'));
// ages.set('Lee', 40); // Error

Lire depuis une ReadonlyMap

Toutes les opérations de lecture restent disponibles : get, has, size, keys, values, entries et le parcours. Seules les méthodes de modification disparaissent.

const m: ReadonlyMap<string, number> = new Map([['a', 1], ['b', 2]]);
for (const [k, v] of m) {
  console.log(k, v);
}
console.log('size:', m.size);

ReadonlySet

ReadonlySet<T> permet de vérifier l'appartenance et de parcourir la collection, mais ne propose pas add, delete ni clear. Utilisez-le pour des ensembles fixes de valeurs autorisées.

const allowed: ReadonlySet<string> = new Set(['read', 'write']);
console.log(allowed.has('read'), allowed.has('delete'));
// allowed.add('admin'); // Error

Parcourir une ReadonlySet

Vous pouvez parcourir une ReadonlySet et lire sa size, mais pas modifier son contenu. Elle convient donc parfaitement aux listes blanches et aux ensembles d'autorisations.

const perms: ReadonlySet<string> = new Set(['view', 'edit']);
perms.forEach((p) => console.log('perm:', p));
console.log('count:', perms.size);

Transmettre une collection en lecture seule aux fonctions

Acceptez un type de collection en lecture seule dans les fonctions qui doivent uniquement lire les données. Cela indique clairement l'intention et empêche la fonction de modifier les données appartenant à l'appelant.

function describe(set: ReadonlySet<string>): string {
  return 'has ' + set.size + ' items';
}
const s = new Set(['x', 'y']);
console.log(describe(s));

Les collections mutables sont compatibles par affectation

Un Map ou un Set ordinaire peut être affecté à son équivalent en lecture seule, car vous réduisez les capacités au lieu de les élargir. La fonction renonce simplement à ses droits de modification.

function keys(m: ReadonlyMap<string, number>): string[] {
  return Array.from(m.keys());
}
const real = new Map([['a', 1]]);
console.log(keys(real));

Interfaces de collections immuables

Les types de collections en lecture seule décrivent une view immuable. L'objet sous-jacent peut toutefois rester mutable ailleurs ; le type en lecture seule limite seulement les opérations que cette référence peut effectuer.

const backing = new Set<number>([1, 2]);
const view: ReadonlySet<number> = backing;
// view.add(3); // Error through the readonly view
backing.add(3); // but the original can still mutate
console.log(view.size);

Choisir le bon type en lecture seule

Adaptez le type en lecture seule à votre structure de données : ReadonlyArray pour les listes ordonnées, ReadonlyMap pour les recherches par clé et valeur, ReadonlySet pour l'appartenance sans doublons. Chacun impose l'immutabilité adaptée à sa forme.

const roles: ReadonlySet<string> = new Set(['admin', 'user']);
const limits: ReadonlyMap<string, number> = new Map([['admin', 100]]);
console.log(roles.has('user'), limits.get('admin'));

Un état partagé plus sûr

Exposer les collections internes avec des types en lecture seule empêche les appelants de corrompre l'état de votre module. Ils peuvent examiner librement les données, mais seul votre code peut les modifier.

class Registry {
  private items = new Set<string>();
  add(name: string): void { this.items.add(name); }
  get all(): ReadonlySet<string> { return this.items; }
}
const r = new Registry();
r.add('a');
console.log(r.all.has('a'));

Vérification rapide

Vérifiez votre compréhension des types de collections en lecture seule.

Récapitulatif : collections en lecture seule

Vous avez découvert la famille des collections en lecture seule :

ReadonlyArray<T>, ReadonlyMap<K, V> et ReadonlySet<T> n'exposent que les opérations de lecture.
Les méthodes de modification (set, add, delete, push) sont supprimées.
Les collections mutables peuvent être affectées à leurs équivalents en lecture seule.
Elles constituent d'excellents types de paramètres et de retour pour un état partagé plus sûr.

Enfin, les schémas d'immutabilité profonde.

function count(s: ReadonlySet<number>): number {
  return s.size;
}
console.log(count(new Set([1, 2, 3])));

Questions Fréquemment Posées

La leçon « ReadonlyArray et ReadonlyMap » est-elle gratuite ?

Oui — le texte complet de « ReadonlyArray et ReadonlyMap » 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 « ReadonlyArray et ReadonlyMap » ?

Utiliser les types de collections readonly intégrés. 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 3 sur 4.

Combien de temps prend la leçon « ReadonlyArray et ReadonlyMap » ?

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