TypeScript Academy · Leçon

Propriétés readonly

Marquer les propriétés d’un objet comme immuables après leur initialisation.

Propriétés readonly est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 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.

Le modificateur en lecture seule

Le modificateur readonly marque une propriété qui peut être définie une fois, mais jamais réaffectée ensuite. Il exprime l’immuabilité au niveau des types et contribue à éviter les modifications accidentelles.

interface Point {
  readonly x: number;
  readonly y: number;
}
const p: Point = { x: 1, y: 2 };
console.log(p.x, p.y);
// p.x = 5; // Error: cannot assign to readonly property

Le modificateur en lecture seule dans les interfaces

Dans une interface, readonly indique quels champs restent fixes après leur création. Le code appelant peut les lire librement, mais le compilateur bloque toute réaffectation.

interface Config {
  readonly env: string;
  retries: number; // mutable
}
const c: Config = { env: 'prod', retries: 3 };
c.retries = 5; // allowed
console.log(c.env, c.retries);

Erreur de compilation lors d’une réaffectation

Tenter d’écrire dans une propriété readonly produit une erreur à la compilation. Cela détecte toute une catégorie de bogues où un state partagé est modifié de manière inattendue.

interface User {
  readonly id: number;
  name: string;
}
const u: User = { id: 1, name: 'Ada' };
u.name = 'Grace'; // ok
// u.id = 2; // Error
console.log(u);

Le modificateur en lecture seule dans les propriétés de classe

Les classes prennent également en charge readonly. Un champ en lecture seule peut être initialisé lors de sa déclaration ou dans le constructeur, mais nulle part ailleurs.

class Circle {
  readonly radius: number;
  constructor(r: number) {
    this.radius = r; // allowed in constructor
  }
}
const c = new Circle(5);
console.log(c.radius);

Définir une seule fois dans le constructeur

Le constructeur est le seul endroit en dehors de la déclaration où vous pouvez affecter un champ en lecture seule. Après la construction, la valeur est verrouillée pendant toute la durée de vie de l’objet.

class Account {
  readonly owner: string;
  constructor(owner: string) {
    this.owner = owner;
  }
  rename() {
    // this.owner = 'x'; // Error: readonly outside constructor
  }
}
console.log(new Account('Sam').owner);

Propriétés de paramètres en lecture seule

Les propriétés de paramètres de TypeScript vous permettent de déclarer et d’initialiser directement un champ en lecture seule dans la signature du constructeur, ce qui réduit le code répétitif.

class Vector {
  constructor(
    readonly x: number,
    readonly y: number
  ) {}
}
const v = new Vector(3, 4);
console.log(v.x, v.y);

Le modificateur en lecture seule s’applique uniquement à la compilation

Point essentiel : readonly n’existe que dans le système de types. Il est supprimé à l’exécution — JavaScript n’en a pas la notion. Il empêche la réaffectation dans votre code TypeScript, mais pas dans la sortie compilée accessible par des chemins non typés.

interface Box { readonly value: number; }
const b: Box = { value: 10 };
// At runtime b is a plain object; readonly is not enforced by JS.
console.log(b.value);

Lecture seule et constante

Ne les confondez pas. const empêche une variable d’être réaffectée. readonly empêche une propriété d’être réaffectée. Un objet déclaré avec const peut toujours avoir des propriétés modifiables, sauf si elles sont readonly.

const obj = { count: 0 }; // const binding
obj.count = 5; // allowed: property is mutable
console.log(obj.count);

Superficiel par nature

readonly est superficiel : il protège la propriété elle-même, et non le contenu de l’objet ou du tableau vers lequel elle pointe. Une référence en lecture seule vers un objet permet toujours de modifier les champs de cet objet.

interface Holder { readonly data: { n: number }; }
const h: Holder = { data: { n: 1 } };
// h.data = {...}; // Error
h.data.n = 99; // allowed: inner field is not readonly
console.log(h.data.n);

Utiliser le modificateur en lecture seule pour des API plus sûres

Marquer les champs des objets renvoyés avec readonly indique aux appelants qu’ils ne doivent pas les modifier. Le type exprime cette intention, transformant une mauvaise utilisation en erreur de compilation plutôt qu’en bogue silencieux.

interface Snapshot { readonly takenAt: number; readonly size: number; }
function snapshot(): Snapshot {
  return { takenAt: Date.now(), size: 1024 };
}
const s = snapshot();
console.log(s.size);

Signatures d’index en lecture seule

Vous pouvez même rendre les signatures d’index en lecture seule, ce qui produit un type semblable à une table dont les entrées peuvent être lues, mais pas réaffectées via l’index.

interface Scores {
  readonly [name: string]: number;
}
const scores: Scores = { ada: 95, sam: 88 };
console.log(scores.ada);
// scores.ada = 100; // Error

Vérification rapide

Vérifiez votre compréhension des propriétés en lecture seule.

Récapitulatif : propriétés en lecture seule

Vous avez appris que readonly :

Permet de définir une propriété une fois, puis bloque toute réaffectation.
Peut être défini lors de la déclaration ou dans le constructeur pour les champs de classe.
S’applique uniquement à la compilation et est superficiel : il n’effectue pas de gel en profondeur des données imbriquées.
Diffère de const : l’un protège les propriétés, l’autre protège les liaisons de variables.

Ensuite, les tableaux et tuples en lecture seule.

interface Meta { readonly id: number; }
const m: Meta = { id: 42 };
console.log(m.id);

Questions Fréquemment Posées

La leçon « Propriétés readonly » est-elle gratuite ?

Oui — le texte complet de « Propriétés 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 « Propriétés readonly » ?

Marquer les propriétés d’un objet comme immuables après leur initialisation. 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 1 sur 4.

Combien de temps prend la leçon « Propriétés 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