Funktionstypen

In JavaScript ist eine Funktion ein Wert. Du kannst sie in einer Variablen speichern, wie du es mit Pfeilfunktionen tust, und einer anderen Funktion als Argument übergeben. In TypeScript hat jeder Wert einen Typ, also hat auch eine Funktion einen. Der Typ von

const kritisch = (kraft: number): number => kraft * 2;

ist (kraft: number) => number: „eine Funktion, die eine Zahl nimmt und eine Zahl zurückgibt“. Er sieht aus wie eine Pfeilfunktion, aber nach dem Pfeil kommt der Rückgabetyp, nicht der Rumpf. Solche Typen siehst du in Fehlermeldungen, zum Beispiel wenn du versuchst, etwas anderes in der Variablen zu speichern:

let zauber = (ziel: string): string => `Feuer trifft den ${ziel}`;
zauber = 5;

main.ts(2,1): error TS2322: Type 'number' is not assignable to type '(ziel: string) => string'.

Funktionstypen braucht man für Parameter, die eine Funktion enthalten. Kira kann auf verschiedene Weise zuschlagen, und die Funktion monsterAngreifen nimmt die Art des Schlags als Argument:

function monsterAngreifen(monster: string, kraft: number, schlag: (kraft: number) => number): string {
    return `Kira trifft den ${monster} mit ${schlag(kraft)} Schaden`;
}

const normal = (kraft: number): number => kraft;
const kritisch = (kraft: number): number => kraft * 2;

console.log(monsterAngreifen("Goblin", 10, normal));
console.log(monsterAngreifen("Troll", 10, kritisch));

Das gibt aus:

Kira trifft den Goblin mit 10 Schaden
Kira trifft den Troll mit 20 Schaden

Innen ist schlag ein Parameter wie jeder andere, enthält aber eine Funktion, also rufst du sie auf: schlag(kraft). Übergib im Aufruf die Funktion selbst, ohne Klammern: kritisch, nicht kritisch(10). Mit Klammern würdest du sie sofort aufrufen und ihr Ergebnis übergeben, die Zahl 20:

function monsterAngreifen(monster: string, kraft: number, schlag: (kraft: number) => number): string {
    return `Kira trifft den ${monster} mit ${schlag(kraft)} Schaden`;
}

const normal = (kraft: number): number => kraft;
const kritisch = (kraft: number): number => kraft * 2;

console.log(monsterAngreifen("Troll", 10, kritisch(10)));

main.ts(8,43): error TS2345: Argument of type 'number' is not assignable to parameter of type '(kraft: number) => number'.

TypeScript prüft auch, dass die übergebene Funktion die richtige Form hat. Eine Funktion, die einen Text will, passt nicht:

function monsterAngreifen(monster: string, kraft: number, schlag: (kraft: number) => number): string {
    return `Kira trifft den ${monster} mit ${schlag(kraft)} Schaden`;
}

const normal = (kraft: number): number => kraft;
const kritisch = (kraft: number): number => kraft * 2;

const schreien = (text: string): string => text.toUpperCase();

console.log(monsterAngreifen("Wolf", 10, schreien));

main.ts(10,42): error TS2345: Argument of type '(text: string) => string' is not assignable to parameter of type '(kraft: number) => number'.
  Types of parameters 'text' and 'kraft' are incompatible.
    Type 'number' is not assignable to type 'string'.

Die eingerückten Zeilen erklären, warum: Die Parameter text und kraft passen nicht zusammen. monsterAngreifen ruft die Funktion mit einer Zahl auf, aber schreien will einen String.

Ein langer Funktionstyp macht die Parameterliste schwer lesbar. Gib ihm mit type einen Namen:

type Schlag = (kraft: number) => number;

function monsterAngreifen(monster: string, kraft: number, schlag: Schlag): string {

type erzeugt einen Typalias: einen neuen Namen für einen Typ. Schlag bedeutet jetzt (kraft: number) => number, und Fehlermeldungen verwenden den neuen Namen (parameter of type 'Schlag'). Per Konvention beginnen Typnamen mit einem Großbuchstaben. In der Lektion „Objekttypen“ verwendest du Typaliasse oft, meist für Objekte.

Den Alias kannst du auch für eine Variable verwenden. Dann braucht der Parameter der Pfeilfunktion keinen eigenen Typ: TypeScript übernimmt ihn von Schlag:

const kritisch: Schlag = (kraft) => kraft * 2;

Das siehst du in der nächsten Übung wieder.