TypeScript Academy · Lektion

readonly-Arrays und Tupel

Schützen Sie Arrays und Tupel vor Mutationsmethoden.

readonly-Arrays und Tupel ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Readonly-Arrays

Ein readonly-Array ist ein Array, aus dem Sie lesen, das Sie aber nicht verändern können. Schreiben Sie es als readonly number[] oder gleichbedeutend als ReadonlyArray<number>. Der Elementtyp bleibt gleich; nur die Veränderung wird verhindert.

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

Der Typ ReadonlyArray

ReadonlyArray<T> ist die generische Form und bedeutet dasselbe wie readonly T[]. Verwenden Sie die Variante, die besser lesbar ist; beide sind austauschbar.

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

Keine verändernden Methoden

Readonly-Arrays enthalten verändernde Methoden überhaupt nicht. push, pop, splice, sort und reverse sind nicht verfügbar – der Typ besitzt sie buchstäblich nicht.

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

Nicht verändernde Methoden funktionieren weiterhin

Methoden, die einen neuen Wert zurückgeben, statt das Array zu verändern – map, filter, concat und slice – sind weiterhin verfügbar. Sie erzeugen neue Arrays, sodass das ursprüngliche Array unverändert bleibt.

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

Readonly-Arrays als Parameter

Wenn eine Funktion readonly T[] akzeptiert, signalisiert sie, dass sie das Array des Aufrufers nicht verändern wird. Dadurch wird die Absicht dokumentiert und der Compiler kann dieses Versprechen durchsetzen.

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

Veränderliche Arrays können readonly zugewiesen werden

Ein gewöhnliches number[] kann einem Parameter vom Typ readonly number[] zugewiesen werden – Sie versprechen lediglich, es nicht zu verändern. Umgekehrt ist dies nicht zulässig.

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

Readonly-Tupel

Auch Tupel können readonly sein: readonly [string, number]. Die Elementtypen und ihre Reihenfolge sind festgelegt, und einzelne Positionen können nicht neu zugewiesen werden.

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

Readonly-Tupel verhindern Veränderungen

Wie Readonly-Arrays entfernen Readonly-Tupel verändernde Methoden und lehnen Zuweisungen über Indizes ab. Sie eignen sich ideal für Datensätze mit fester Struktur, etwa Koordinatenpaare.

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

Const-Assertion im Vergleich zum readonly-Typ

Es gibt zwei leicht unterschiedliche Möglichkeiten, Readonly-Arrays zu erhalten. Eine readonly number[]-Annotation behält den allgemeinen Elementtyp bei. as const geht weiter: Es erzeugt ein Readonly-Tupel aus Literal-Typen.

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

Die passende Variante wählen

Verwenden Sie eine readonly T[]-Annotation, wenn Sie Unveränderlichkeit, aber allgemeine Elementtypen benötigen. Verwenden Sie as const, wenn Sie zusätzlich die exakten Literalwerte benötigen, etwa um daraus eine Union abzuleiten.

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

Unveränderlichkeit für gemeinsam genutzte Daten

Readonly-Arrays und Tupel schützen gemeinsam genutzte Konstanten und Konfigurationslisten vor versehentlichen Änderungen. Dadurch werden Fehler durch unerwartete Veränderungen bereits zur Compilezeit unmöglich.

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

Schnelltest

Testen Sie Ihr Verständnis von Readonly-Arrays und Tupeln.

Zusammenfassung: Readonly-Arrays und Tupel

Sie haben gelernt, dass:

readonly T[] / ReadonlyArray<T> Veränderungen verhindert, aber das Lesen und nicht verändernde Methoden erlaubt.
Verändernde Methoden wie push/splice aus dem Typ entfernt werden.
Readonly-Tupel sowohl die Länge als auch die Elementtypen festlegen.
as const weiter geht und Readonly-Tupel aus Literal-Typen erzeugt.

Als Nächstes: readonly-Sammlungstypen.

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

Häufig gestellte Fragen

Ist die Lektion „readonly-Arrays und Tupel“ kostenlos?

Ja — der vollständige Text von „readonly-Arrays und Tupel“ 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-Arrays und Tupel“?

Schützen Sie Arrays und Tupel vor Mutationsmethoden. 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 2 von 4.

Wie lange dauert die Lektion „readonly-Arrays und Tupel“?

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