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

Interfaces in TypeScript

Interfaces

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

Zeit, die losen Variablen aus Kapitel 4 endlich zu einem sauberen Buch-Typ zusammenzufassen. Interfaces sind TypeScripts Hauptwerkzeug, um die FORM eines Objekts zu benennen und wiederzuverwenden.

Das erste Interface: Buch

src/models/Buch.ts
export interface Buch {
  isbn: string;
  titel: string;
  autor: string;
  erscheinungsjahr: number;
  seitenzahl: number;
  genres: string[];
  istAusgeliehen: boolean;
}

export macht das Interface in anderen Dateien importierbar (ausführlich in Kapitel 24, Module) – wir legen ab jetzt jeden bedeutenden Typ in eine EIGENE Datei unter src/models/, statt alles in index.ts zu häufen.

Das Interface verwenden

src/index.ts
import { Buch } from './models/Buch.js';
// Beachten Sie die '.js'-Endung im Import, OBWOHL die Datei 'Buch.ts' heißt -
// das ist eine Eigenheit von "NodeNext"-Modulauflösung aus Kapitel 3: Imports
// referenzieren den KOMPILIERTEN Dateinamen, nicht den Quelldateinamen.

const herrDerRinge: Buch = {
  isbn: '978-3-608-93830-2',
  titel: 'Der Herr der Ringe',
  autor: 'J.R.R. Tolkien',
  erscheinungsjahr: 1954,
  seitenzahl: 1216,
  genres: ['Fantasy', 'Abenteuer'],
  istAusgeliehen: false,
};

console.log(`${herrDerRinge.titel} von ${herrDerRinge.autor}`);

const buchOhneAutor: Buch = {
  isbn: '123',
  titel: 'Test',
  erscheinungsjahr: 2024,
  seitenzahl: 100,
  genres: [],
  istAusgeliehen: false,
}; // Fehler: Eigenschaft 'autor' fehlt

Achtung: Ein Objekt, das einem Interface zugewiesen wird, muss ALLE Eigenschaften des Interfaces besitzen, mit den KORREKTEN Typen – fehlt eine Eigenschaft oder hat sie den falschen Typ, zeigt TypeScript SOFORT einen präzisen Fehler mit dem Namen der fehlenden/falschen Eigenschaft.

Optionale Eigenschaften

export interface Buch {
  isbn: string;
  titel: string;
  autor: string;
  erscheinungsjahr: number;
  seitenzahl: number;
  genres: string[];
  istAusgeliehen: boolean;
  coverBildUrl?: string; // optional - nicht jedes Buch hat ein Cover-Bild hinterlegt
}

GENAU dieselbe ?-Syntax wie bei optionalen Funktionsparametern (Kapitel 6) – coverBildUrl darf beim Erstellen eines Buch-Objekts weggelassen werden, hat aber innerhalb des Codes den Typ string | undefined.

readonly: unveränderliche Eigenschaften

export interface Buch {
  readonly isbn: string; // eine ISBN ändert sich NIE nach der Erstellung
  titel: string;
  // ... Rest wie gehabt
}

herrDerRinge.isbn = '999'; // Fehler: isbn ist schreibgeschützt

readonly verhindert VERÄNDERUNG nach der Objekterstellung – nützlich für Eigenschaften, die konzeptionell eine feste Identität darstellen (wie eine ISBN), im Gegensatz zu Eigenschaften, die sich über die Lebensdauer eines Objekts ändern SOLLEN (wie istAusgeliehen).

Verschachtelte Interfaces: Autor als eigener Typ

src/models/Autor.ts
export interface Autor {
  name: string;
  geburtsjahr: number;
  nationalitaet: string;
}
// In Buch.ts:
import { Autor } from './Autor.js';

export interface Buch {
  readonly isbn: string;
  titel: string;
  autor: Autor; // statt nur eines strings jetzt das vollständige Autor-Objekt
  erscheinungsjahr: number;
  seitenzahl: number;
  genres: string[];
  istAusgeliehen: boolean;
  coverBildUrl?: string;
}

Interfaces können BELIEBIG andere Typen als Eigenschaften enthalten, auch andere Interfaces – autor: Autor ist jetzt ein vollständiges, EIGENES Objekt statt eines simplen Strings, mit eigener Typprüfung für name/geburtsjahr/nationalitaet.

Interfaces erweitern mit extends

export interface Person {
  name: string;
  geburtsjahr: number;
}

export interface Autor extends Person {
  nationalitaet: string;
  bekannteWerke: string[];
}

export interface Mitglied extends Person {
  mitgliedsnummer: string;
  ausgelieheneBuecher: string[]; // ISBNs
}

extends übernimmt ALLE Eigenschaften des Basis-Interfaces und fügt neue hinzu – GENAU wie Klassenvererbung (Kapitel 13), nur für reine Typdefinitionen ohne Implementierung. Autor und Mitglied teilen sich name/geburtsjahr aus Person, ohne diese Felder in JEDEM Interface neu aufzuschreiben.

Tipp: Faustregel: sobald eine Objekt-Form an MEHR als EINER Stelle im Code verwendet wird (Funktion erwartet sie, mehrere Variablen haben sie), lohnt sich ein benanntes Interface – für rein EINMALIGE, lokale Objekte (wie unser Vergleichsfunktion-Beispiel aus Kapitel 6) ist die Inline-Type-Inference aus Kapitel 5 oft ausreichend.