TypeScript Typinferenz: wann annotieren und wann nicht

Typinferenz bedeutet, dass TypeScript einen Typ ermittelt, den du nicht geschrieben hast. Initialisiere eine Variable, und sie übernimmt den Typ des Werts; gib aus einer Funktion einen Wert zurück, und der Rückgabetyp ergibt sich daraus. Der meiste TypeScript-Code enthält weit weniger Annotationen, als viele erwarten.

let count = 0;            // number
let language = "TypeScript"; // string
let tags = ["ts", "js"];  // string[]
let user = { name: "Ada", age: 36 }; // { name: string; age: number }

function area(w: number, h: number) {
    return w * h;          // return type inferred as number
}

const size = area(3, 4);  // number
console.log(count, language, tags, user, size);

// The inferred types are enforced like written ones:
// @ts-expect-error: Type 'string' is not assignable to type 'number'.
count = "one";

Die Kommentare zeigen, was ein Editor anzeigt, wenn du mit der Maus über den jeweiligen Namen fährst. Die letzte Zeile ist ein Compilerfehler (TS2322), obwohl count nie annotiert wurde; // @ts-expect-error markiert ihn als erwartet, damit der Rest des Blocks läuft.

let vs const: Literal Widening

Eine const kann sich nie ändern, deshalb gibt TypeScript ihr den engsten Typ: den Literalwert selbst. Eine let bekommt den weiteren Typ, weil sie später neu zugewiesen werden kann.

let a = "left";    // string
const b = "left";  // "left"
let c = 42;        // number
const d = 42;      // 42
const e = true;    // true

Das spielt eine Rolle, wenn eine Funktion nur bestimmte Werte annimmt:

// This does not compile: `let` widened "left" to string.
function move(direction: "left" | "right") {
    console.log("moving", direction);
}

let dir = "left";
move(dir);

const fixed = "left";
move(fixed); // fine: fixed has type "left"

index.ts(7,6): error TS2345: Argument of type 'string' is not assignable to parameter of type '"left" | "right"'.

Die Lösung ist const oder eine Annotation an der Variablen: let dir: "left" | "right" = "left". Literaltypen haben eine eigene Seite, Literaltypen.

Objekte und Arrays erweitern ihre Elemente

Eigenschaften eines Objektliterals sind veränderbar, daher werden sie wie bei let erweitert, selbst wenn das Objekt selbst const ist. Array-Elemente verhalten sich genauso. as const macht alles readonly und behält die Literaltypen.

const config = { mode: "dark", retries: 3 };
// config: { mode: string; retries: number }
config.mode = "light"; // allowed: mode is string

const frozen = { mode: "dark", retries: 3 } as const;
// frozen: { readonly mode: "dark"; readonly retries: 3 }

const sizes = ["s", "m", "l"];            // string[]
const fixedSizes = ["s", "m", "l"] as const; // readonly ["s", "m", "l"]

console.log(config.mode, frozen.mode, sizes.length, fixedSizes[0]);

Inferenz des Rückgabetyps

Der Rückgabetyp einer Funktion wird aus ihren return-Anweisungen abgeleitet. Gibt es mehrere, ist das Ergebnis deren Union.

function parsePort(text: string) {
    if (text === "") return null;
    return Number(text);
}
// parsePort returns number | null

const port = parsePort("8080");
if (port !== null) {
    console.log(port + 1); // 8081: port is number inside the check
}

function log(message: string) {
    console.log(message);
}
// log returns void: there is no return value

log("done");

Abgeleitete Rückgabetypen reichen für die meisten Funktionen. Schreibe den Rückgabetyp bei exportierten oder öffentlichen Funktionen ausdrücklich hin, wenn die Signatur ein Vertrag sein soll: Eine Änderung im Funktionsrumpf, die einen anderen Typ zurückgibt, scheitert dann an der Funktion selbst und nicht bei einem weit entfernten Aufrufer.

Kontextuelle Typisierung: Callbacks bekommen ihre Typen

Parameter werden nicht daraus abgeleitet, wie eine Funktion aufgerufen wird. Es gibt zwei Ausnahmen. Ein Parameter mit Standardwert übernimmt den Typ des Standardwerts (function retry(times = 3) macht times zu einer number). Und eine Funktion, die dort geschrieben wird, wo bereits ein Funktionstyp erwartet wird, bekommt ihre Parametertypen aus diesem Kontext, sodass Callback-Parameter keine Annotation brauchen.

const names = ["ada", "grace", "alan"];

// s is string: map on a string[] passes strings
const upper = names.map((s) => s.toUpperCase());

// a and b are strings, the result must be a number
const sorted = [...names].sort((a, b) => a.length - b.length);

// The variable's type gives the arrow its parameter and return types
const greet: (name: string) => string = (n) => `Hello, ${n}`;

console.log(upper, sorted, greet("Ada"));

Dasselbe gilt für forEach, filter, reduce, Promise-Callbacks, Event-Handler und jede Funktion, die du an einen Parameter mit deklariertem Funktionstyp übergibst.

Parameter brauchen Annotationen

Ohne Standardwert oder einen solchen Kontext schaut TypeScript nicht nach, wie eine Funktion aufgerufen wird, um ihre Parametertypen zu erraten. Mit strict ist ein nicht annotierter Parameter der Fehler TS7006:

// This does not compile: a parameter with no type and no context.
function double(x) {
    return x * 2;
}
console.log(double(21));

index.ts(2,17): error TS7006: Parameter 'x' implicitly has an 'any' type.

Schreibe function double(x: number), dann gibt der Block 42 aus, und der Rückgabetyp number wird aus x * 2 abgeleitet.

Best Common Type

Bei einem Array-Literal mit unterschiedlichen Arten von Werten leitet TypeScript ein Array der Union ihrer Typen ab. Es sucht nicht nach einem gemeinsamen Basistyp, den du nicht genannt hast.

const mixed = [1, "two", null]; // (string | number | null)[]
const nums = [1, 2.5, -3];      // number[]

class Animal { name = "animal"; }
class Dog extends Animal { bark() { return "woof"; } }
class Cat extends Animal { meow() { return "meow"; } }

const pets = [new Dog(), new Cat()];            // (Cat | Dog)[]
const animals: Animal[] = [new Dog(), new Cat()]; // annotate to get Animal[]

console.log(mixed.length, nums, pets.length, animals[0].name);

Das leere Array ist der eine Fall, auf den du achten solltest. const list = [] beginnt als „evolving“ Array, dessen Typ mit jedem push wächst; eine Annotation, const list: string[] = [], nennt die Absicht von vornherein und ist klarer.

Wann annotieren

Am schnellsten siehst du den abgeleiteten Typ, indem du im Editor mit der Maus über den Namen fährst. Ohne Editor weist du den Wert einer Variablen eines falschen Typs zu, etwa const probe: boolean = mixed;, und die Fehlermeldung des Compilers nennt den abgeleiteten Typ.