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

Funktionen typisieren in TypeScript

Funktionen typisieren

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

Funktionen sind das Herzstück jedes Programms – dieses Kapitel behandelt ALLE Aspekte, Funktionen in TypeScript zu typisieren: Parameter, Rückgabewerte, optionale und Default-Parameter, Rest-Parameter, und Funktions-Überladungen.

Parameter- und Rückgabetyp

function berechneJahreSeitErscheinung(erscheinungsjahr: number): number {
  const aktuellesJahr = new Date().getFullYear();
  return aktuellesJahr - erscheinungsjahr;
}

berechneJahreSeitErscheinung(1954);   // ✓ korrekt
berechneJahreSeitErscheinung('1954'); // ✗ Fehler: string nicht zuweisbar zu number

erscheinungsjahr: number ist die Parameter-Annotation, ): number NACH der Klammer der Rückgabetyp. Wie in Kapitel 5 erklärt: Parameter MÜSSEN annotiert werden (TypeScript kann sie nicht ableiten), der Rückgabetyp ist technisch ableitbar, aber explizit angeben ist guter Stil.

void: Funktionen ohne Rückgabewert

function protokolliereAusleihe(titel: string): void {
  console.log(`"${titel}" wurde ausgeliehen.`);
  // kein return - void passt
}

void aus Kapitel 4 in der Praxis: eine Funktion, die NUR einen Seiteneffekt hat (hier: Konsolen-Ausgabe) und nichts Sinnvolles zurückgibt.

Optionale Parameter mit ?

function formatiereBuchtitel(titel: string, untertitel?: string): string {
  if (untertitel) {
    return `${titel}: ${untertitel}`;
  }
  return titel;
}

formatiereBuchtitel('Der Herr der Ringe');                        // ✓ untertitel weggelassen
formatiereBuchtitel('Der Herr der Ringe', 'Die Gefährten');       // ✓ mit Untertitel

Achtung: Optionale Parameter (?) MÜSSEN nach allen Pflicht-Parametern stehen – function f(a?: string, b: number) ist ein Fehler. Innerhalb der Funktion hat untertitel den Typ string | undefined (Vorgriff auf Kapitel 9), nicht einfach string – deshalb ist die if (untertitel)-Prüfung nötig, bevor man den Wert wie einen garantierten String behandelt.

Default-Parameter

function erstelleBuchListe(anzahl: number = 10): string[] {
  return Array.from({ length: anzahl }, (_, i) => `Buch ${i + 1}`);
}

erstelleBuchListe();   // nutzt den Default: 10
erstelleBuchListe(3);  // überschreibt den Default: 3

Anders als bei optionalen Parametern (string | undefined) hat anzahl HIER den sauberen Typ number – TypeScript weiß, dass beim Weglassen automatisch der Default eingesetzt wird, der Wert ist innerhalb der Funktion also NIEMALS undefined.

Rest-Parameter: beliebig viele Argumente

function sammleGenres(...genres: string[]): string[] {
  return [...new Set(genres)]; // Duplikate entfernen
}

sammleGenres('Fantasy', 'Abenteuer', 'Fantasy'); // ['Fantasy', 'Abenteuer']

...genres: string[] sammelt eine BELIEBIGE Anzahl von Argumenten in ein einziges Array – jedes einzelne Argument muss dem Elementtyp (string) entsprechen.

Funktionstypen als eigenständiger Typ

type Vergleichsfunktion = (a: string, b: string) => number;

const alphabetisch: Vergleichsfunktion = (a, b) => a.localeCompare(b);
// Parameter a/b brauchen HIER keine eigene Annotation - TypeScript leitet sie
// aus dem Vergleichsfunktion-Typ ab ("Contextual Typing")

type Vergleichsfunktion = (a: string, b: string) => number beschreibt die FORM einer Funktion (welche Parameter, welcher Rückgabetyp), ohne sie zu implementieren – nützlich für Callback-Parameter (siehe Array.prototype.sort-artige Muster) und wird in Kapitel 8 (Type Aliases) vertieft.

Praxis: eine erste Buchsuch-Funktion

src/index.ts
interface EinfachesBuch {
  titel: string;
  autor: string;
  erscheinungsjahr: number;
}
// 'interface' wird ausführlich in Kapitel 7 erklärt - hier schon als Vorgriff genutzt,
// um eine sinnvolle Buchsuche zu demonstrieren

const buecher: EinfachesBuch[] = [
  { titel: 'Der Herr der Ringe', autor: 'J.R.R. Tolkien', erscheinungsjahr: 1954 },
  { titel: '1984', autor: 'George Orwell', erscheinungsjahr: 1949 },
  { titel: 'Der Hobbit', autor: 'J.R.R. Tolkien', erscheinungsjahr: 1937 },
];

function suchenNachAutor(buecher: EinfachesBuch[], autor: string): EinfachesBuch[] {
  return buecher.filter((buch) => buch.autor === autor);
}

const tolkienBuecher = suchenNachAutor(buecher, 'J.R.R. Tolkien');
console.log(`${tolkienBuecher.length} Bücher von Tolkien gefunden:`);
tolkienBuecher.forEach((buch) => console.log(`- ${buch.titel} (${buch.erscheinungsjahr})`));

Tipp: Faustregel für Funktionssignaturen: je genauer die Parameter- und Rückgabetypen, desto besser die Autovervollständigung UND desto früher fallen Ihnen selbst Tippfehler auf – suchenNachAutor(buecher, 'j.r.r. tolkien') (Kleinschreibung) würde HIER zwar keinen TYP-Fehler auslösen (beides sind string), aber ein leeres Ergebnis liefern – ein guter Moment, um zu betonen: Typen verhindern TYP-Fehler, keine LOGIK-Fehler.