Funktionen in TypeScript typisieren

Funktionen sind das Arbeitspferd jedes Programms. In TypeScript können Parameter und Rückgabewerte mit Typen versehen werden, was sowohl die Fehlersuche erleichtert als auch die Lesbarkeit des Codes verbessert.

Grundlegende Parametertypannotationen

Die einfachste Form der Typisierung ist die direkte Annotation jedes Parameters:

function addiere(a: number, b: number): number {
  return a + b;
}

function begrüße(name: string): string {
  return `Hallo, ${name}!`;
}

function prüfeAlter(alter: number): boolean {
  return alter >= 18;
}

Der Rückgabetyp steht nach dem schließenden Klammernpaar, getrennt durch einen Doppelpunkt. Der Compiler prüft, ob alle return-Statements tatsächlich den deklarierten Typ zurückgeben.

Arrow Functions typisieren

Arrow Functions werden genauso typisiert wie normale Funktionen:

const multipliziere = (a: number, b: number): number => a * b;

const großschreiben = (text: string): string => text.toUpperCase();

// Mehrzeiliger Körper:
const formatiere = (zahl: number, stellen: number): string => {
  return zahl.toFixed(stellen);
};

Optionale Parameter

Mit einem Fragezeichen nach dem Parameternamen wird ein Parameter optional. Er muss beim Aufruf nicht angegeben werden und ist dann undefined:

function erstelle(name: string, beschreibung?: string): string {
  if (beschreibung !== undefined) {
    return `${name}: ${beschreibung}`;
  }
  return name;
}

erstelle("Produkt A");               // Erlaubt
erstelle("Produkt A", "Ein Artikel"); // Auch erlaubt

Optionale Parameter müssen immer nach allen Pflichtparametern stehen.

Parameter mit Standardwerten

Standardwerte sind oft praktischer als optionale Parameter, weil der Wert immer definiert ist:

function berechneRabatt(preis: number, prozent: number = 10): number {
  return preis - preis * (prozent / 100);
}

berechneRabatt(100);      // Ergebnis: 90 (10% Standardrabatt)
berechneRabatt(100, 20); // Ergebnis: 80 (explizit 20%)

Wenn ein Standardwert gesetzt ist, leitet TypeScript den Parametertyp automatisch ab. Eine explizite Annotation ist dann nicht nötig, aber erlaubt.

Rest-Parameter

Rest-Parameter erlauben eine variable Anzahl von Argumenten:

function summiere(...zahlen: number[]): number {
  return zahlen.reduce((gesamt, zahl) => gesamt + zahl, 0);
}

summiere(1, 2, 3);         // 6
summiere(10, 20, 30, 40);  // 100

Der Rest-Parameter muss der letzte Parameter sein und erhält immer den Typ eines Arrays.

Funktionen als Parameter

In TypeScript können Funktionen als Parameter übergeben werden. Der Typ beschreibt die Signatur der erwarteten Funktion:

function verarbeiteZahlen(
  zahlen: number[],
  operation: (zahl: number) => number
): number[] {
  return zahlen.map(operation);
}

const quadrate = verarbeiteZahlen([1, 2, 3, 4], (n) => n * n);
// Ergebnis: [1, 4, 9, 16]

const verdoppelt = verarbeiteZahlen([1, 2, 3], (n) => n * 2);
// Ergebnis: [2, 4, 6]

Void und Funktionen ohne Rückgabewert

Funktionen, die nichts zurückgeben, erhalten den Rückgabetyp void:

function logge(nachricht: string): void {
  console.log(`[LOG] ${nachricht}`);
  // Kein return-Statement nötig
}

// Callback-Typ mit void:
type EreignisHandler = (ereignis: string, daten: unknown) => void;

Async-Funktionen

Asynchrone Funktionen geben immer ein Promise zurück. Der Typ des aufgelösten Werts steht in spitzen Klammern:

async function holeDaten(url: string): Promise<string> {
  const antwort = await fetch(url);
  return antwort.text();
}

async function ladeBenutzer(id: number): Promise<{ name: string; email: string }> {
  const antwort = await fetch(`/api/benutzer/${id}`);
  return antwort.json();
}

TypeScript kann den Promise-Rückgabetyp auch selbst ableiten, aber explizite Annotationen machen die Erwartungen klar.

Function Overloads

Wenn eine Funktion abhängig von den Argumenttypen unterschiedliche Rückgabetypen hat, kommen Overloads zum Einsatz:

function formatiere(wert: string): string;
function formatiere(wert: number): string;
function formatiere(wert: string | number): string {
  if (typeof wert === "number") {
    return wert.toFixed(2);
  }
  return wert.trim();
}

const a = formatiere("  Hallo  "); // Typ: string
const b = formatiere(3.14159);    // Typ: string

Die ersten Zeilen sind die Overload-Signaturen, die letzte ist die eigentliche Implementierung. Die Implementierung ist von außen nicht sichtbar.

Generische Funktionen

Generics ermöglichen wiederverwendbare, typsichere Funktionen:

function ersterOderStandard<T>(liste: T[], standard: T): T {
  return liste.length > 0 ? liste[0] : standard;
}

const zahl = ersterOderStandard([1, 2, 3], 0);       // Typ: number
const text = ersterOderStandard([], "Standardwert"); // Typ: string

Das <T> ist ein Typparameter. TypeScript leitet den konkreten Typ aus den übergebenen Argumenten ab.

Praxis-Tipp: Typen aus Funktionssignaturen ableiten

TypeScript bietet Hilfswerkzeuge, um Typen aus Funktionssignaturen zu extrahieren:

function erstelleBenutzer(name: string, alter: number) {
  return { name, alter, erstellt: new Date() };
}

type Benutzer = ReturnType<typeof erstelleBenutzer>;
// Benutzer ist: { name: string; alter: number; erstellt: Date }

Wer diese Konzepte direkt ausprobieren möchte, findet auf typescript-playground.de einen idealen Einstieg. Dort lassen sich Funktionssignaturen schreiben und sofort testen, ohne ein lokales Projekt aufzusetzen.

Fazit

Typisierte Funktionen sind das Rückgrat eines wartbaren TypeScript-Projekts. Von einfachen Annotationen über optionale Parameter bis zu generischen Overloads bietet TypeScript ein vollständiges Werkzeugset. Der Compiler prüft alle Aufrufstellen und gibt präzise Fehlermeldungen, wenn Typen nicht passen.