Kodokon kodokon.com

Objekte und Interfaces

Beschreibe die Form deiner Objekte mit präzisen Typen und mache sie dann mit Interfaces wiederverwendbar.

8 Min. · 3 Fragen

Diese Lektion in Kodokon öffnen

In JavaScript gruppiert ein Objekt mehrere zusammengehörige Informationen als Schlüssel-Wert-Paare, wie eine Karteikarte: Ein Buch hat einen Titel und eine Seitenzahl. In TypeScript kannst du die genaue Form eines Objekts beschreiben: welche Eigenschaften es enthält und welchen Typ jede davon hat.

TYPESCRIPT
const book: { title: string; pages: number } = {
  title: "The Little Prince",
  pages: 96,
};

console.log(book.title); // "The Little Prince"
Die Form des Objekts steht direkt im Typ.

Die Form jedes Mal auszuschreiben wird schnell mühsam. Ein Interface gibt dieser Form einen Namen, damit du sie überall wiederverwenden kannst. Du deklarierst es mit dem Schlüsselwort interface, gefolgt von einem Namen (per Konvention großgeschrieben) und dann der Liste der Eigenschaften mit ihren Typen.

TYPESCRIPT
interface Recipe {
  name: string;
  servings: number;
  isVegetarian: boolean;
}

const pancakes: Recipe = {
  name: "Pancakes",
  servings: 4,
  isVegetarian: true,
};
Das Interface Recipe beschreibt jedes Rezept im Programm.

Alle Eigenschaften eines Interface sind standardmäßig Pflicht: servings zu vergessen würde einen Fehler auslösen. Um eine Eigenschaft optional zu machen, fügst du direkt hinter ihrem Namen ein Fragezeichen ? hinzu. Das Objekt lässt sich dann mit oder ohne diese Eigenschaft erstellen.

TYPESCRIPT
interface Contact {
  name: string;
  phone: string;
  email?: string; // optional thanks to the ?
}

const alice: Contact = {
  name: "Alice",
  phone: "0601020304",
}; // allowed: email can be omitted
email? macht die Eigenschaft optional.

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

  1. Wofür ist ein Interface in TypeScript da?
    • Um die Form eines Objekts zu beschreiben und wiederzuverwenden
    • Um eine Webseite zu erstellen
    • Um eine Funktion schneller laufen zu lassen
    • Um Daten auf einem Server zu speichern
  2. Was bedeutet das Fragezeichen in email?: string?
    • Die Eigenschaft email ist Pflicht
    • Die Eigenschaft email ist optional
    • Die Eigenschaft email ist immer leer
  3. Einem Objekt vom Typ Recipe fehlt die Eigenschaft name. Was passiert?
    • TypeScript meldet einen Fehler vor der Ausführung
    • Das Programm stürzt zur Laufzeit ohne Vorwarnung ab
    • TypeScript fügt die Eigenschaft automatisch hinzu