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

Async/Await in TypeScript typisieren

Async/Await typisieren

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

Reale Anwendungen laden Daten oft von EXTERN (Datenbank, API, Datei) – asynchron. Dieses Kapitel zeigt, wie Promise<T> und async/await mit TypeScripts Typsystem zusammenspielen, simuliert an einem asynchronen Bibliotheks-Datenspeicher.

Promise<T>: der Typ für zukünftige Werte

function ladeAlleBuecher(): Promise<Buch[]> {
  return new Promise((resolve) => {
    setTimeout(() => resolve([/* ... */]), 100);
  });
}

// Der Rückgabetyp Promise<Buch[]> sagt: "gibt IRGENDWANN ein Buch[] zurück, nicht sofort"

Promise<T> ist selbst ein GENERISCHER Typ (Kapitel 17) – T ist der Typ des Werts, der EINMAL vorliegen wird, wenn das Promise erfolgreich abschließt ("resolved").

async/await: lesbare Syntax für Promises

async function ladeUndZeigeBuecher(): Promise<void> {
  const buecher = await ladeAlleBuecher(); // buecher hat den Typ Buch[], NICHT Promise<Buch[]>
  console.log(`${buecher.length} Bücher geladen.`);
}

Eine mit async markierte Funktion gibt IMMER ein Promise zurück (auch wenn Sie es nicht explizit hinschreiben – TypeScript "packt" den angegebenen Rückgabetyp automatisch ein). await "packt" ein Promise wieder AUS – await ladeAlleBuecher() liefert Buch[], nicht Promise<Buch[]>.

Praxis: ein asynchrones Repository

Wir bauen einen simulierten, asynchronen Datenspeicher – realistischer als synchrone In-Memory-Arrays, aber ohne eine echte Datenbank einzurichten (außerhalb des Sprachfokus dieses Tutorials):

src/repository/AsyncBuchRepository.ts
import { Buch } from '../models/Buch.js';
import { MediumNichtGefundenFehler } from '../errors/BibliotheksFehler.js';

// Simuliert Netzwerk-/Datenbank-Latenz - in einer echten App wäre das ein
// tatsächlicher fetch()- oder Datenbank-Aufruf
function verzoegerung(ms: number): Promise<void> {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

export class AsyncBuchRepository {
  private buecher: Buch[] = [];

  async alle(): Promise<readonly Buch[]> {
    await verzoegerung(50);
    return this.buecher;
  }

  async findeNachIsbn(isbn: string): Promise<Buch> {
    await verzoegerung(50);
    const buch = this.buecher.find((b) => b.isbn === isbn);
    if (!buch) {
      throw new MediumNichtGefundenFehler(isbn);
    }
    return buch;
  }

  async hinzufuegen(buch: Buch): Promise<void> {
    await verzoegerung(50);
    this.buecher.push(buch);
  }
}

Fehlerbehandlung bei async: try/catch bleibt gültig

async function zeigeBuchDetails(isbn: string): Promise<void> {
  try {
    const buch = await repository.findeNachIsbn(isbn);
    console.log(buch.titel);
  } catch (error) {
    if (error instanceof MediumNichtGefundenFehler) { // GENAU wie in Kapitel 25
      console.log(`Nicht gefunden: ${error.isbn}`);
    }
  }
}

await lässt einen abgelehnten ("rejected") Promise wie einen normal GEWORFENEN Fehler wirken – try/catch aus Kapitel 25 funktioniert GENAUSO wie bei synchronem Code, KEINE separate Fehlerbehandlungs-API für Async nötig.

Promise.all mit typisierten Ergebnissen

async function ladeMehrereBuecher(isbns: string[]): Promise<Buch[]> {
  const promises = isbns.map((isbn) => repository.findeNachIsbn(isbn));
  return Promise.all(promises); // Promise<Buch[]> - TypeScript leitet das AUTOMATISCH ab
}

Promise.all ist SELBST generisch typisiert: aus einem Array von Promise<Buch>-Werten leitet TypeScript automatisch Promise<Buch[]> als Rückgabetyp ab – KEINE manuelle Typannotation nötig, reine Type Inference (Kapitel 5) angewendet auf ein fortgeschritteneres Szenario.

Bonus: Top-Level Await in src/index.ts

// In index.ts können Sie 'await' DIREKT nutzen, ohne umschließende async-Funktion -
// eine moderne ES-Modul-Funktion (siehe Kapitel 2s "type: module"):
const repository = new AsyncBuchRepository();
await repository.hinzufuegen(/* ... */);
const alleBuecher = await repository.alle();
console.log(`${alleBuecher.length} Bücher im Repository.`);

Tipp: Faustregel: JEDE Funktion, die await intern nutzt, MUSS selbst async sein (mit EINER Ausnahme: Top-Level Await in ES-Modulen, wie oben gezeigt). TypeScript prüft diese Regel automatisch – vergessen Sie async, zeigt der Compiler sofort einen Fehler bei der Verwendung von await.