TypeScript Academy · Lektion

readonly-Eigenschaften

Kennzeichnen Sie Objekteigenschaften nach der Initialisierung als unveränderlich.

readonly-Eigenschaften ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Der readonly-Modifikator

Der readonly-Modifikator kennzeichnet eine Eigenschaft, die einmal gesetzt, danach aber nie wieder neu zugewiesen werden kann. Er drückt Unveränderlichkeit auf Typebene aus und hilft, versehentliche Änderungen zu verhindern.

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

readonly bei Interfaces

In einem Interface dokumentiert readonly, welche Felder nach der Erstellung unverändert bleiben. Sie können von Verbrauchern frei gelesen werden, aber der Compiler verhindert jede erneute Zuweisung.

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);

Kompilierungsfehler bei erneuter Zuweisung

Der Versuch, in eine readonly-Eigenschaft zu schreiben, führt zu einem Kompilierungsfehler. Dadurch wird eine ganze Kategorie von Fehlern erkannt, bei denen gemeinsam genutzter Zustand unerwartet verändert wird.

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);

readonly bei Klasseneigenschaften

Auch Klassen unterstützen readonly. Ein readonly-Feld kann bei der Deklaration oder im Konstruktor initialisiert werden, aber nirgendwo sonst.

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

Einmaliges Setzen im Konstruktor

Der Konstruktor ist der einzige Ort außerhalb der Deklaration, an dem Sie ein readonly-Feld zuweisen dürfen. Nach der Erstellung bleibt der Wert während der gesamten Lebensdauer des Objekts unveränderlich.

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);

readonly-Parametereigenschaften

Mit den Parametereigenschaften von TypeScript können Sie ein readonly-Feld direkt in der Konstruktorsignatur deklarieren und initialisieren, wodurch sich wiederholender Code reduziert.

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

readonly gilt nur zur Compilezeit

Entscheidend ist, dass readonly nur im Typsystem existiert. Zur Laufzeit wird es entfernt – JavaScript kennt dieses Konzept nicht. Es verhindert erneute Zuweisungen in Ihrem TypeScript-Code, nicht jedoch in kompiliertem Code, der über untypisierte Pfade erreicht wird.

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);

readonly im Vergleich zu const

Verwechseln Sie die beiden nicht. const verhindert, dass eine Variable neu gebunden wird. readonly verhindert, dass eine Eigenschaft neu zugewiesen wird. Ein const-Objekt kann weiterhin veränderliche Eigenschaften haben, sofern diese nicht readonly sind.

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

Von Natur aus flach

readonly ist flach: Es schützt die Eigenschaft selbst, nicht den Inhalt des Objekts oder Arrays, auf das sie verweist. Eine readonly-Referenz auf ein Objekt erlaubt weiterhin, die Felder dieses Objekts zu verändern.

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);

Sicherere APIs mit readonly

Wenn Sie die Felder zurückgegebener Objekte als readonly kennzeichnen, signalisieren Sie den Aufrufern, dass sie diese nicht verändern sollten. Die Absicht wird im Typ festgehalten, sodass eine missbräuchliche Verwendung zu einem Kompilierungsfehler statt zu einem unbemerkten Fehler führt.

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

readonly in Indexsignaturen

Sie können sogar Indexsignaturen als readonly definieren. Dadurch entsteht ein mapähnlicher Typ, dessen Einträge gelesen, aber nicht über den Index neu zugewiesen werden können.

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

Schnelltest

Testen Sie Ihr Verständnis von readonly-Eigenschaften.

Zusammenfassung: readonly-Eigenschaften

Sie haben gelernt, dass readonly:

erlaubt, eine Eigenschaft einmal zu setzen, und danach erneute Zuweisungen verhindert.
bei Klassenfeldern in der Deklaration oder im Konstruktor gesetzt werden kann.
nur zur Compilezeit gilt und flach ist – verschachtelte Daten werden nicht tiefgreifend eingefroren.
sich von const unterscheidet: Das eine schützt Eigenschaften, das andere Variablenbindungen.

Als Nächstes: readonly-Arrays und Tupel.

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

Häufig gestellte Fragen

Ist die Lektion „readonly-Eigenschaften“ kostenlos?

Ja — der vollständige Text von „readonly-Eigenschaften“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „readonly-Eigenschaften“?

Kennzeichnen Sie Objekteigenschaften nach der Initialisierung als unveränderlich. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „readonly-Eigenschaften“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy