TypeScript Funktionstyp: Arrow-Syntax und Callback-Typen

Ein Funktionstyp beschreibt die Parameter und den Rückgabewert einer Funktion, geschrieben mit einem Pfeil: (a: number, b: number) => number. Gib ihm mit type einen Namen, und du kannst ihn für Variablen, Parameter und Objekteigenschaften verwenden.

type Operation = (a: number, b: number) => number;

const add: Operation = (a, b) => a + b;       // a and b are number
const multiply: Operation = (x, y) => x * y;  // names do not have to match

function apply(op: Operation, a: number, b: number): number {
  return op(a, b);
}

console.log(apply(add, 2, 3));      // 5
console.log(apply(multiply, 2, 3)); // 6

Die Funktion, die add zugewiesen wird, braucht keine Annotationen: Ihre Parametertypen kommen aus Operation. Das heißt kontextuelle Typisierung, und es ist der Hauptgrund, Funktionstypen zu benennen.

Syntax von Funktionstypen

Die Form ist (parameters) => ReturnType. Jeder Parameter braucht einen Namen und einen Typ. Die Namen dienen der Lesbarkeit und den Hinweisen im Editor; jede Funktion mit kompatiblen Parametertypen passt, egal wie sie sie nennt.

type Predicate = (value: number) => boolean;
type Formatter = (value: number, digits?: number) => string; // optional parameter
type Logger = (...parts: string[]) => void;                    // rest parameter
type Factory = () => { id: number };                           // no parameters

Der Name ist nicht optional. (string) => void deklariert einen Parameter namens string ohne Typ, und der Strict Mode lehnt das ab mit TS7051: Parameter has a name but no type. Did you mean 'arg0: string'?. Schreibe (value: string) => void.

Arrow Functions typisieren

Eine Arrow Function lässt sich auf zwei Arten typisieren. Annotiere die Funktion selbst oder annotiere die Variable mit einem Funktionstyp und lass die Parameter ableiten.

// 1. Annotations on the function
const toCelsius = (f: number): number => ((f - 32) * 5) / 9;

// 2. A function type on the variable
const toFahrenheit: (c: number) => number = (c) => (c * 9) / 5 + 32;

// 3. The same, with a named type
type Convert = (value: number) => number;
const round1: Convert = (v) => Math.round(v * 10) / 10;

console.log(round1(toCelsius(100)));  // 37.8
console.log(toFahrenheit(37));        // 98.6

Form 1 ist die übliche Wahl für eine eigenständige Funktion. Form 3 lohnt sich, wenn mehrere Funktionen eine Signatur teilen (Handler, Vergleichsfunktionen, Konverter), weil die Signatur einmal geschrieben wird und eine Änderung daran überall geprüft wird.

Callback-Typen

Ein Parameter, dessen Typ ein Funktionstyp ist, ist ein Callback. Die Funktion des Aufrufers wird dagegen geprüft, und ihre Parameter werden daraus abgeleitet.

function repeat(times: number, action: (index: number) => void): void {
  for (let i = 0; i < times; i++) action(i);
}

repeat(3, (i) => console.log("run", i));

function mapValues(values: number[], fn: (value: number, index: number) => string): string[] {
  const out: string[] = [];
  values.forEach((v, i) => out.push(fn(v, i)));
  return out;
}

// A callback may ignore trailing parameters: this one takes only value.
console.log(mapValues([1.5, 2.25], (v) => v.toFixed(1))); // [ '1.5', '2.3' ]

Zwei Regeln machen Callbacks angenehm:

• Weniger Parameter sind in Ordnung. Eine Funktion mit einem Parameter kann übergeben werden, wo zwei angeboten werden. JavaScript ignoriert zusätzliche Argumente, also erlaubt TypeScript das. Mehr Parameter, als der Typ anbietet, sind ein Fehler (Target signature provides too few arguments.).
• Eine Rückgabe void akzeptiert alles. Ein Callback vom Typ (...) => void darf einen Wert zurückgeben; der Aufrufer verspricht, ihn nicht zu verwenden. Deshalb kompiliert list.forEach((x) => other.push(x)), obwohl push eine Zahl zurückgibt.

Die Parametertypen müssen trotzdem kompatibel sein. (x: string) => ... zu übergeben, wo (a: number, b: number) => number erwartet wird, scheitert mit Types of parameters 'x' and 'a' are incompatible.

Call Signatures

(n: number) => string ist die Kurzform eines Objekttyps mit Call Signature: { (n: number): string }. Die lange Form brauchst du, wenn die Funktion auch Eigenschaften trägt.

type Counter = {
  (): number;        // call signature: calling it returns a number
  count: number;     // and it has a property
  reset: () => void; // and a method
};

function makeCounter(): Counter {
  const fn = () => ++fn.count;
  fn.count = 0;
  fn.reset = () => { fn.count = 0; };
  return fn;
}

const next = makeCounter();
next();
next();
console.log(next(), next.count); // 3 3
next.reset();
console.log(next.count);         // 0

TypeScript erlaubt es, einer mit const deklarierten Funktion im selben Scope Eigenschaften hinzuzufügen, und erfasst sie im Typ der Funktion. Auch ein Interface kann eine Call Signature enthalten: interface Counter { (): number; count: number }.

Eine Construct Signature beschreibt etwas, das mit new aufgerufen wird. Sie setzt new davor: new (name: string) => User oder in Objektform { new (name: string): User }. So typisierst du einen Parameter, der eine Klasse bekommt.

Methodensyntax vs Eigenschaftssyntax

In einem Objekttyp lässt sich ein Funktionsmember als Methode schreiben, handle(value: string): void, oder als Eigenschaft, die eine Funktion enthält, handle: (value: string) => void. Sie sehen austauschbar aus, werden unter strict aber unterschiedlich geprüft:

// This does not compile: the property form checks parameters strictly.
interface WithMethod { handle(value: string | number): void }
interface WithProperty { handle: (value: string | number) => void }

const onlyStrings = (value: string) => console.log(value.toUpperCase());

const a: WithMethod = { handle: onlyStrings };   // accepted
const b: WithProperty = { handle: onlyStrings }; // rejected
a.handle(42);

Der Compiler meldet:

index.ts(8,27): error TS2322: Type '(value: string) => void' is not assignable to type '(value: string | number) => void'.
  Types of parameters 'value' and 'value' are incompatible.
    Type 'string | number' is not assignable to type 'string'.
      Type 'number' is not assignable to type 'string'.

Der Fehler ist berechtigt: onlyStrings kann keine Zahl verarbeiten. Die Methodenform lässt denselben Fehler durch (Methodenparameter werden aus historischen Gründen „bivariant“ geprüft), und a.handle(42) würde zur Laufzeit abstürzen mit TypeError: value.toUpperCase is not a function. Lösche die Zeile mit b, um diesen Absturz zu sehen. Wenn du eigene Objekttypen schreibst, findet die Eigenschaftsform mehr Fehler.

Den Typ Function vermeiden

Function ist der eingebaute Typ, den jeder Funktionswert erfüllt. Er ist fast nie das, was du willst: TypeScript kennt weder die Parameter noch den Rückgabetyp, also wird jeder Aufruf akzeptiert und gibt any zurück.

const loose: Function = Math.max;
const result = loose("a", {});   // compiles: any arguments, result is any
console.log(result);             // NaN

const strict: (...values: number[]) => number = Math.max;
console.log(strict(3, 9, 4));    // 9
// @ts-expect-error: Argument of type 'string' is not assignable to parameter of type 'number'.
strict("a");

Ersetze Function durch die echte Signatur. Akzeptierst du wirklich jede Funktion (ein generisches debounce, ein Logging-Wrapper), nimmt (...args: never[]) => unknown jede Funktion an und hält das Ergebnis trotzdem bei unknown statt any. Für Funktionen, deren Typen von ihrer Eingabe abhängen, siehe Generics: Ein generischer Funktionstyp sieht aus wie <T>(value: T) => T.