Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Klassen-Grundlagen in TypeScript

Klassen-Grundlagen

~16 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

Bisher haben unsere Interfaces nur DATEN beschrieben – kein VERHALTEN. Eine Bibliothek-Klasse soll nicht nur den Bestand SPEICHERN, sondern auch Operationen darauf anbieten (Buch ausleihen, zurückgeben, suchen). Klassen sind TypeScripts Werkzeug dafür.

Die erste Klasse: Bibliothek

src/services/Bibliothek.ts
import { Buch } from '../models/Buch.js';

export class Bibliothek {
  bestand: Buch[];

  constructor(startBestand: Buch[]) {
    this.bestand = startBestand;
  }

  buchAnzahl(): number {
    return this.bestand.length;
  }

  findeNachTitel(titel: string): Buch | undefined {
    return this.bestand.find((buch) => buch.titel === titel);
  }
}

bestand: Buch[] ist eine EIGENSCHAFT ("property") – wie ein Interface-Feld, aber innerhalb einer Klasse. Der constructor läuft EINMALIG bei new Bibliothek(...) und initialisiert die Eigenschaften. Methoden wie buchAnzahl() sind Funktionen, die auf this (die aktuelle Instanz) zugreifen können.

Die Klasse verwenden

src/index.ts
import { Bibliothek } from './services/Bibliothek.js';
import { bibliotheksBestand } from './data/beispielDaten.js';

const bibliothek = new Bibliothek([...bibliotheksBestand]);
// [...bibliotheksBestand] kopiert das readonly-Array (Kapitel 11) in ein
// neues, VERÄNDERBARES Array - die Bibliothek-Klasse braucht ein normales Buch[],
// keinen readonly-Bestand, da sie später Bücher hinzufügen/entfernen soll

console.log(`Die Bibliothek hat ${bibliothek.buchAnzahl()} Bücher.`);

const gefunden = bibliothek.findeNachTitel('1984');
if (gefunden) {
  console.log(`Gefunden: ${gefunden.titel} von ${gefunden.autor.name}`);
}

Constructor Property Promotion: weniger Schreibarbeit

Das Muster "Eigenschaft deklarieren + im Constructor zuweisen" ist so häufig, dass TypeScript eine Abkürzung dafür anbietet:

// Ausführlich (wie oben):
export class Bibliothek {
  bestand: Buch[];
  constructor(bestand: Buch[]) {
    this.bestand = bestand;
  }
}

// Kurzform mit Constructor Property Promotion - GENAU dasselbe Ergebnis:
export class Bibliothek {
  constructor(public bestand: Buch[]) {}
}

public bestand: Buch[] DIREKT im Constructor-Parameter deklariert GLEICHZEITIG die Eigenschaft UND weist sie automatisch zu – kein separates this.bestand = bestand mehr nötig. public wird in Kapitel 14 (Zugriffsmodifizierer) im Detail erklärt; hier reicht zu wissen, dass es die Kurzform aktiviert.

Wann Klasse, wann Interface?

WerkzeugVerwendungszweck
interfaceBeschreibt NUR die Form von Daten – keine Implementierung, existiert NICHT zur Laufzeit, nur zur Typprüfung. Unsere Buch/Autor-Typen: reine Datencontainer.
classBündelt Daten UND Verhalten (Methoden) – existiert AUCH zur Laufzeit als echtes JavaScript-Konstrukt, erzeugbar mit new. Unsere Bibliothek: hat Operationen, die auf den Daten arbeiten.

Eine gängige Faustregel: reine DATEN (was ein Buch IST) als Interface, Dinge mit VERHALTEN (was man mit einer Bibliothek TUN kann) als Klasse. Diese Trennung ziehen wir konsequent durch das gesamte restliche Tutorial durch – src/models/ für Interfaces, src/services/ für Klassen.

Methoden erweitern: Ausleihen implementieren

// Ergänzung in Bibliothek.ts:
leiheAus(isbn: string): boolean {
  const buch = this.bestand.find((b) => b.isbn === isbn);
  if (!buch || buch.status !== 'verfuegbar') {
    return false;
  }
  buch.status = 'ausgeliehen';
  return true;
}

leiheAus gibt boolean zurück, um Erfolg/Misserfolg anzuzeigen – ein bewusst einfaches Muster für jetzt; Kapitel 25 (Fehlerbehandlung) zeigt eine aussagekräftigere Alternative mit eigenen Fehlertypen.

Tipp: Ab jetzt wächst unsere Bibliothek-Klasse über mehrere Kapitel hinweg weiter – Vererbung (Kapitel 13), Zugriffsmodifizierer (Kapitel 14) und Generics (Kapitel 17-18) bauen ALLE direkt auf dieser Grundlage auf.