Generische Interfaces

Teil des Abschnitts Einführung in TypeScript der JavaScript-Journey von Coddy — Lektion 61 von 73.

Genauso wie Sie generische Funktionen erstellen können, können Sie auch generische Interfaces erstellen. Dies ermöglicht es Ihnen, die Struktur eines Objekts zu definieren, während bestimmte Eigenschaftstypen flexibel und wiederverwendbar bleiben.

So erstellen Sie ein generisches Interface mit derselben Typparameter-Syntax:

interface Container {
  value: T;
  isEmpty: boolean;
}

Das <T> nach dem Interface-Namen erstellt einen Typparameter, der in der gesamten Interface-Definition verwendet werden kann. In diesem Beispiel wird die Eigenschaft value den Typ haben, den Sie bei der Verwendung des Interfaces angeben, während isEmpty ein fester boolean-Typ bleibt.

Wenn Sie ein generisches Interface verwenden, geben Sie den konkreten Typ in spitzen Klammern an:

const stringContainer: Container = {
  value: "hello",
  isEmpty: false
};

const numberContainer: Container = {
  value: 42,
  isEmpty: false
};

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Erstellen Sie ein generisches Interface namens Result, das Daten eines beliebigen Typs zusammen mit einer Erfolgs-Information speichern kann.

Das Interface sollte zwei Eigenschaften haben:

success vom Typ boolean
data vom Typ T (der generische Typparameter)

Erstellen Sie die folgenden Objekte unter Verwendung Ihres generischen Interfaces:

stringResult vom Typ Result<string> mit success: true und data: "Operation completed"
numberResult vom Typ Result<number> mit success: true und data: 42
booleanResult vom Typ Result<boolean> mit success: false und data: false
arrayResult vom Typ Result<string[]> mit success: true und data: ["item1", "item2", "item3"]

Erstellen Sie eine generische Funktion namens processResult, die:

Einen generischen Typparameter T verwendet
Einen Parameter result vom Typ Result<T> entgegennimmt
Eine String-Nachricht zurückgibt
Wenn success den Wert true hat, "Success: [data]" zurückgibt
Wenn success den Wert false hat, "Failed: [data]" zurückgibt

Geben Sie die folgenden Ausgaben aus:

Geben Sie das Ergebnis des Aufrufs von processResult mit stringResult aus
Geben Sie das Ergebnis des Aufrufs von processResult mit numberResult aus
Geben Sie das Ergebnis des Aufrufs von processResult mit booleanResult aus
Geben Sie das Ergebnis des Aufrufs von processResult mit arrayResult aus
Geben Sie stringResult.data aus

Spickzettel

Generische Interfaces ermöglichen es Ihnen, die Form eines Objekts zu definieren, während bestimmte Eigenschaftstypen flexibel und wiederverwendbar bleiben.

Erstellen Sie ein generisches Interface mit der Typparameter-Syntax:

interface Container<T> {
  value: T;
  isEmpty: boolean;
}

Das <T> nach dem Interface-Namen erstellt einen Typparameter, der in der gesamten Interface-Definition verwendet werden kann.

Verwenden Sie ein generisches Interface, indem Sie den konkreten Typ in spitzen Klammern angeben:

const stringContainer: Container<string> = {
  value: "hello",
  isEmpty: false
};

const numberContainer: Container<number> = {
  value: 42,
  isEmpty: false
};

Probier es selbst

// TODO: Schreiben Sie Ihren Code hier

// Erstellen Sie das generische Result-Interface


// Erstellen Sie die Objekte unter Verwendung des Result-Interfaces


// Erstellen Sie die generische processResult-Funktion


// Geben Sie die erforderlichen Ausgaben aus

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.