TypeScript: Funktionen als Parameter mit strenger Typisierung – vollständige Analyse

TypeScript: Funktionen als Parameter mit strenger Typisierung – vollständige Analyse mit Beispielen

Hallo Kollege! Wenn du jemals in JavaScript geschrieben und eine Funktion an eine andere Funktion übergeben hast (z.B. an setTimeout oder Array.map), kennst du bereits das Konzept der Funktionen höherer Ordnung. Aber wenn es um TypeScript geht, stellt sich die logische Frage: "Kann ich eine Funktion, die ich als Parameter übergebe, streng typisieren?". Die Antwort ist ja, und das ist eine der mächtigsten Funktionen der Sprache.

In diesem Artikel werden wir behandeln, wie man Funktionstypen in TypeScript deklariert, wie man sie als Argumente übergibt und wie man bei Signaturen keine Fehler macht. Du wirst lernen, wie du deinen Code nicht nur sicher, sondern auch selbstdokumentierend machst. Los geht's!

Übrigens: Diese Frage ist eine der beliebtesten auf Stack Overflow (tausende Aufrufe). Wenn du es also ein für alle Mal verstehen willst, bist du hier genau richtig.

Warum das wichtig ist: Strenge Typisierung spart Zeit

Stell dir vor, du schreibst eine Funktion, die eine andere Funktion (Callback) entgegennimmt. Ohne Typen könntest du versehentlich eine Funktion mit der falschen Anzahl von Argumenten oder dem falschen Rückgabewert übergeben. TypeScript fängt solche Fehler zur Kompilierzeit ab, nicht erst zur Laufzeit. Das ist wie eine Versicherung für deinen Code.

Hier ist ein Beispiel, das ohne Typen nicht funktioniert:

// JavaScript (ohne Typen) – Fehler erst zur Laufzeit\nfunction processData(callback) {\n    const result = callback(10, 20);\n    console.log(result);\n}\n\n// Ups, eine Funktion mit einem Parameter übergeben\nprocessData((x) => x * 2); // NaN – weil der zweite Parameter undefined ist

Mit TypeScript können wir explizit angeben, welche Signatur der Callback haben soll:

// TypeScript – Fehler zur Kompilierzeit\nfunction processData(callback: (a: number, b: number) => number): void {\n    const result = callback(10, 20);\n    console.log(result);\n}\n\n// ✅ Richtig\nprocessData((x, y) => x + y); // 30\n\n// ❌ Fehler: Typ '(x: number) => number' ist nicht zuweisbar zu Typ '(a: number, b: number) => number'\n// processData((x) => x * 2);

Cool, oder? Lass uns nun alle Möglichkeiten zur Deklaration solcher Typen durchgehen.

Methode 1: Inline-Signatur (am einfachsten)

Der direkteste Weg ist, die Funktionssignatur direkt in den Parametern anzugeben. Das ist praktisch, wenn die Parameterfunktion nur einmal verwendet wird.

// Funktion, die eine andere Funktion mit zwei Zahlen entgegennimmt und einen String zurückgibt\nfunction formatNumbers(\n    a: number,\n    b: number,\n    formatter: (x: number, y: number) => string\n): string {\n    return formatter(a, b);\n}\n\n// Verwendung\nconst result = formatNumbers(5, 10, (x, y) => `Summe: ${x + y}`);\nconsole.log(result); // "Summe: 15"

Vorteile: schnell, anschaulich.
\nNachteile: Wenn die Signatur wiederholt wird, muss Code dupliziert werden.

Methode 2: Typ-Alias für die Funktion (wiederverwendbar)

Wenn du dieselbe Signatur an mehreren Stellen verwendest, ist es besser, sie in einen Typ-Alias auszulagern. Das macht den Code sauberer und leichter wartbar.

// Deklarieren des Funktionstyps\ntype Callback = (error: Error | null, data: string) => void;\n\n// Funktion, die einen Callback entgegennimmt\nfunction fetchData(url: string, callback: Callback): void {\n    // Simulation einer asynchronen Anfrage\n    setTimeout(() => {\n        if (url) {\n            callback(null, "Daten empfangen");\n        } else {\n            callback(new Error("URL ist leer"), "");\n        }\n    }, 1000);\n}\n\n// Verwendung\nfetchData("/api/data", (err, data) => {\n    if (err) {\n        console.error("Fehler:", err.message);\n    } else {\n        console.log("Erfolg:", data);\n    }\n});

Beachte: Wir haben void als Rückgabetyp verwendet. Das bedeutet, dass die Funktion nichts zurückgeben muss.