So arbeiten Sie mit TypeScript und Promises

TypeScript verbessert die JavaScript-Entwicklung durch das Hinzufügen statischer Typen. Beim Arbeiten mit asynchronem Code werden Promises verwendet, um Vorgänge abzuwickeln, die in der Zukunft abgeschlossen werden. TypeScript bietet Tools zum Verwalten von Promises mit Typsicherheit und Klarheit. In diesem Handbuch erfahren Sie, wie Sie mit Promises in TypeScript arbeiten, von der grundlegenden Verwendung bis hin zu fortgeschrittenen Szenarien.

Versprechen verstehen

Ein Promise ist ein Objekt, das den endgültigen Abschluss oder das Scheitern einer asynchronen Operation darstellt. Es bietet Methoden zur Behandlung des Ergebnisses oder Fehlers der Operation. In TypeScript können Promises typisiert werden, um sicherzustellen, dass sie mit dem erwarteten Datentyp aufgelöst werden.

Grundlegende Verwendung von Promises

Das Erstellen und Verwenden von Promises in TypeScript ist unkompliziert. Hier ist ein Beispiel für ein Promise, das mit einem String aufgelöst wird:

function fetchData(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // Outputs: Data fetched successfully!
}).catch((error) => {
  console.error("Error:", error);
});

In diesem Beispiel gibt fetchData ein Versprechen zurück, das mit einem String aufgelöst wird. Die Methode then verarbeitet den aufgelösten Wert, während catch alle Fehler verarbeitet.

Umgang mit Promises mit Async/Await

TypeScript unterstützt die Syntax async/await, die eine lesbarere Möglichkeit bietet, mit Promises zu arbeiten. So verwenden Sie async/await mit Promises:

async function fetchDataAsync(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched successfully!");
    }, 1000);
  });
}

async function processData() {
  try {
    const data = await fetchDataAsync();
    console.log(data); // Outputs: Data fetched successfully!
  } catch (error) {
    console.error("Error:", error);
  }
}

processData();

In diesem Beispiel wird die Funktion fetchDataAsync als async deklariert, sodass sie das Schlüsselwort await verwenden kann, um auf die Erfüllung des Versprechens zu warten. Fehler werden mithilfe eines try/catch-Blocks abgefangen.

Promises mit Generika eintippen

TypeScript ermöglicht die Angabe des Datentyps, mit dem ein Promise durch die Verwendung von Generika aufgelöst wird. Dadurch wird sichergestellt, dass die Typen im gesamten Code korrekt verwaltet werden. Hier ist ein Beispiel für ein typisiertes Promise:

interface User {
  id: number;
  name: string;
}

function fetchUser(): Promise {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id: 1, name: "John Doe" });
    }, 1000);
  });
}

fetchUser().then((user) => {
  console.log(user.id, user.name); // Outputs: 1 John Doe
}).catch((error) => {
  console.error("Error:", error);
});

In diesem Beispiel gibt fetchUser ein Promise zurück, das mit einem User-Objekt aufgelöst wird. Der Typ wird mithilfe von Generika angegeben, wodurch die Typensicherheit gewährleistet wird.

Verwenden von Promises in TypeScript mit API-Aufrufen

Promises werden häufig bei API-Aufrufen verwendet, um asynchrones Abrufen von Daten zu handhaben. Das Typsystem von TypeScript hilft bei der Verwaltung von Antworten von APIs:

async function getUserData(userId: number): Promise {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error("Network response was not ok.");
  }
  const data: User = await response.json();
  return data;
}

getUserData(1).then((user) => {
  console.log(user);
}).catch((error) => {
  console.error("Error:", error);
});

Dieses Beispiel zeigt, wie Sie mit fetch einen API-Aufruf durchführen und die Antwort mithilfe von Promises und async/await verarbeiten. Die Antwort wird als User typisiert, was die Typensicherheit gewährleistet.

Abschluss

Das Arbeiten mit Promises in TypeScript bietet verbesserte Typsicherheit und Übersichtlichkeit für asynchrone Vorgänge. Durch die Verwendung des Typisierungssystems, der async/await-Syntax und der Generika von TypeScript können Entwickler Promises effektiv verwalten und zuverlässigere Anwendungen erstellen.