Articles
Einführung in TypeScript
Generatorfunktionen in TypeScript

Generatorfunktionen in TypeScript

Dieser Artikel erklärt Generatorfunktionen in TypeScript.

Sie können alles lernen, von den Grundlagen der Verwendung von Generatorfunktionen bis hin zu fortgeschrittenen Beispielen, die mit asynchroner Verarbeitung kombiniert sind, zusammen mit Codebeispielen.

YouTube Video

Generatorfunktionen

Generatorfunktionen in TypeScript bieten ähnliche Funktionalitäten wie die Generatorfunktionen in JavaScript. Generatorfunktionen werden mit function* (eine Funktionsdeklaration mit einem Sternchen) definiert und sind spezielle Funktionen, die im Gegensatz zu normalen Funktionen die Ausführung pausieren und wieder aufnehmen können.

Wenn eine Generatorfunktion aufgerufen wird, wird ein Iterator zurückgegeben, der Werte nacheinander durch diesen Iterator generiert, wobei Sie die Ausführung mit dem Schlüsselwort yield pausieren oder Werte von außen senden können.

Grundlegende Syntax von Generatorfunktionen 

 1function* myGenerator(): Generator<number, void, unknown> {
 2    yield 1;
 3    yield 2;
 4    yield 3;
 5}
 6
 7const gen = myGenerator();
 8
 9console.log(gen.next().value); // 1
10console.log(gen.next().value); // 2
11console.log(gen.next().value); // 3
12console.log(gen.next().done);  // true (Iteration finished)
  • Definieren Sie eine Generatorfunktion mit function* myGenerator().
  • Das Schlüsselwort yield pausiert die Funktion während der Rückgabe eines Wertes.
  • Jedes Mal, wenn die Methode next() aufgerufen wird, wird die Ausführung der Generatorfunktion fortgesetzt und geht zum nächsten yield über.

next() gibt ein Objekt zurück, das den nächsten Wert und eine Eigenschaft namens done enthält. Wenn done den Wert true hat, bedeutet dies, dass alle Werte generiert wurden und die Verarbeitung des Generators abgeschlossen ist.

Anwendungen von Generatorfunktionen

Die Verwendung von Generatorfunktionen ermöglicht eine einfache Darstellung sequenzieller Verarbeitung. Im folgenden Beispiel erstellen wir eine Generatorfunktion, die eine Zahlenfolge generiert.

 1function* sequenceGenerator(start: number = 0, step: number = 1) {
 2    let current = start;
 3    while (true) {
 4        yield current;
 5        current += step;
 6    }
 7}
 8
 9const seq = sequenceGenerator(1, 2);
10
11console.log(seq.next().value); // 1
12console.log(seq.next().value); // 3
13console.log(seq.next().value); // 5
  • In diesem Beispiel generiert sequenceGenerator eine unendlich wachsende Zahlenfolge. Verwenden Sie yield, um bei jedem Schritt Werte zurückzugeben, und generieren Sie den nächsten Wert bei nachfolgenden Aufrufen.

Werte an next übergeben

Die Methode next() kann einen Wert empfangen, der in die Generatorfunktion gesendet werden kann.

 1function* adder() {
 2    const num1 = yield;
 3    const num2 = yield;
 4    yield num1 + num2;
 5}
 6
 7const addGen = adder();
 8addGen.next();          // Initialization
 9addGen.next(5);         // Set 5 to num1
10const result = addGen.next(10).value; // Set 10 to num2 and get result
11console.log(result);    // 15
  • In diesem Beispiel senden next(5) und next(10) ihre jeweiligen Werte in die Generatorfunktion, und yield num1 + num2 gibt deren Summe zurück.

return und throw

  • return(value) kann den Generator beenden und den angegebenen Wert zurückgeben.
  • throw(error) kann eine Ausnahme innerhalb des Generators auslösen, die für die Handhabung von Ausnahmen im Generator verwendet wird.
 1function* testGenerator() {
 2    try {
 3        yield 1;
 4        yield 2;
 5    } catch (e) {
 6        console.error("Error caught:", e);
 7    }
 8}
 9
10const gen = testGenerator();
11console.log(gen.next().value); // 1
12gen.throw(new Error("An error occurred!")); // Error caught: An error occurred!
  • In diesem Beispiel wird die Methode throw verwendet, um einen Fehler innerhalb des Generators zu erzeugen, und dieser Fehler wird innerhalb des Generators abgefangen.

Typdefinition in TypeScript

Die Typdefinition einer Generatorfunktion kann im folgenden Format angegeben werden.

1// Generator<YieldType, ReturnType, NextType>
2function* myGenerator(): Generator<number, void, unknown> {
3    yield 1;
4    yield 2;
5    yield 3;
6}
  • Sie geben Typen in der Form von Generator<YieldType, ReturnType, NextType> an.
    • YieldType ist der Typ des von yield zurückgegebenen Werts.
    • ReturnType ist der Typ des von return zurückgegebenen Werts.
    • NextType ist der Typ des Werts, der an next() übergeben wird.

Im folgenden Beispiel werden bestimmte Typen angegeben, um den Generator sicher mit Typen zu verwenden.

 1function* numberGenerator(): Generator<number, void, number> {
 2    const num1 = yield 1;
 3    const num2 = yield num1 + 2;
 4    yield num2 + 3;
 5}
 6
 7const gen = numberGenerator();
 8
 9console.log(gen.next().value);   // 1
10console.log(gen.next(10).value); // 12 (10 + 2)
11console.log(gen.next(20).value); // 23 (20 + 3)

Generatoren und asynchrone Verarbeitung

Generatoren können auch für die asynchrone Verarbeitung verwendet werden. Zum Beispiel können Sie yield verwenden, um auf die Ergebnisse von asynchronen Operationen zu warten, während die sequentielle Verarbeitung fortgesetzt wird. Allerdings wird in TypeScript oder JavaScript häufiger async/await verwendet.

1function* asyncTask() {
2    const result1 = yield fetch("https://codesparklab.com/json/example1.json");
3    console.log(result1);
4
5    const result2 = yield fetch("https://codesparklab.com/json/example2.json");
6    console.log(result2);
7}

Auch wenn Sie mit Generatoren asynchrone Operationen sequenziell verarbeiten können, werden sie für die asynchrone Verarbeitung nicht häufig verwendet, da Promises und async/await praktischer sind.

Zusammenfassung

  • Generatorfunktionen sind spezielle Funktionen, die mit function* definiert werden und Werte mit yield zurückgeben können, während die Ausführung der Funktion pausiert.
  • Verwenden Sie next(), um den Generator fortzusetzen und Werte zu empfangen. Außerdem können Sie Werte in den Generator mit next(value) übergeben.
  • Sie können return() und throw() verwenden, um Generatorfunktionen zu beenden oder Fehler zu behandeln.
  • Wenn Sie Generatoren in TypeScript verwenden, können Sie Typdefinitionen nutzen, um typsicheren Code zu schreiben.

Generatoren sind mächtige Werkzeuge, mit denen Sie Iterationen flexibel steuern können.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video

Async/await in TypeScript