TypeScript for-Schleife, forEach, for...of und for...in

TypeScript hat dieselben Schleifen wie JavaScript: for, for...of, for...in, while, do...while und die Array-Methode forEach. TypeScript ergänzt die Typen: Die Schleifenvariable von for...of hat den Elementtyp, und ein Schlüssel in for...in ist immer ein string.

const scores: number[] = [90, 72, 85];

// Classic for loop: i is number
for (let i = 0; i < scores.length; i++) {
    console.log(`#${i + 1}: ${scores[i]}`);
}

// for...of: score is number
for (const score of scores) {
    console.log(score >= 80 ? "pass" : "fail");
}

// forEach: callback gets (value, index, array)
scores.forEach((score, index) => console.log(index, score));

Für die meisten Schleifen über Arrays ist for...of die erste Wahl: Es liest sich klar, unterstützt break, continue und await und braucht keine Annotationen.

Die klassische for-Schleife

for (init; condition; update) ist die Schleife zum Zählen, für Schritte größer als eins oder um rückwärts zu laufen. TypeScript leitet den Zähler aus seinem Startwert ab.

// Every second index
for (let i = 0; i < 10; i += 2) {
    step(i);
}

// Backwards over an array
const letters = ["a", "b", "c"];
for (let i = letters.length - 1; i >= 0; i--) {
    console.log(letters[i]);
}

function step(n: number) {
    console.log("step", n);
}

Deklariere den Zähler mit let, nicht mit var. Mit let bekommt jeder Durchlauf eine eigene Bindung, sodass ein in der Schleife erzeugter Callback den Wert dieses Durchlaufs sieht.

for...of: Werte von Arrays, Strings und Maps

for...of funktioniert mit allem, was iterierbar ist, und die Schleifenvariable bekommt den passenden Typ. Um auch den Index zu erhalten, durchläufst du array.entries(), das [index, value]-Tupel liefert.

type Task = { title: string; done: boolean };
const tasks: Task[] = [
    { title: "write docs", done: true },
    { title: "fix bug", done: false },
];

for (const task of tasks) {              // task: Task
    console.log(task.title, task.done ? "done" : "todo");
}

for (const [i, task] of tasks.entries()) { // i: number, task: Task
    console.log(i, task.title);
}

for (const ch of "hey") console.log(ch);   // ch: string

const ages = new Map([["ada", 36], ["alan", 41]]);
for (const [name, age] of ages) {          // name: string, age: number
    console.log(`${name} is ${age}`);
}

break verlässt die Schleife und continue springt zum nächsten Element, genau wie in einer for-Schleife. Die Details zur Laufzeit (Iterables, Generatoren) stehen auf der JavaScript-Seite zu for...of und for...in.

forEach: kein break, kein await

forEach ruft für jedes Element eine Funktion auf und gibt undefined zurück. Die Parameter des Callbacks werden vom Array her typisiert, Annotationen sind also nicht nötig. Zwei Dinge kann es nicht:

• Früh aufhören. break im Callback ist der Compilerfehler TS1107, Jump target cannot cross function boundary. Ein return beendet nur den aktuellen Aufruf und wirkt daher wie continue.
• Auf asynchrone Arbeit warten. forEach ignoriert das Promise, das ein async-Callback zurückgibt.

const nums = [1, 2, 3, 4, 5];

// return skips, it does not stop
nums.forEach((n) => {
    if (n % 2 === 0) return;
    console.log("odd", n);
});

// To stop early, use for...of with break, or some/find
for (const n of nums) {
    if (n > 2) break;
    console.log("small", n);
}
const firstBig = nums.find((n) => n > 3); // number | undefined
console.log(firstBig); // 4

Die async-Falle übersieht man leicht, weil sie ohne Warnung kompiliert:

const wait = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));

async function main() {
    // forEach starts all three and does not wait
    [30, 10, 20].forEach(async (ms) => {
        await wait(ms);
        console.log("forEach finished", ms);
    });
    console.log("after forEach"); // printed first

    await wait(50);

    // for...of waits for each await in turn
    for (const ms of [30, 10, 20]) {
        await wait(ms);
        console.log("for...of finished", ms);
    }
    console.log("after for...of"); // printed last
}

main();

Die forEach-Callbacks enden in der Reihenfolge der Timer (10, 20, 30), nachdem die Schleife längst weitergelaufen ist. Die Version mit for...of führt sie nacheinander aus. Für parallele Arbeit, auf die du trotzdem wartest, nimm await Promise.all(items.map(async (item) => { ... })).

for...in: Schlüssel sind Strings

for...in durchläuft die aufzählbaren Eigenschaftsnamen eines Objekts. Der Typ des Schlüssels ist immer string, selbst bei Arrays, wo die Schlüssel die Indizes als Strings sind. Das macht den Indexzugriff auf ein typisiertes Objekt umständlich:

// This does not compile: key is string, not "name" | "age".
const user = { name: "Ada", age: 36 };

for (const key in user) {
    console.log(key, user[key]);
}

index.ts(5,22): error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ name: string; age: number; }'.
  No index signature with a parameter of type 'string' was found on type '{ name: string; age: number; }'.

TypeScript typisiert den Schlüssel absichtlich als string: Zur Laufzeit kann ein Objekt mehr Eigenschaften haben, als sein Typ aufführt (strukturelle Typisierung erlaubt zusätzliche), und for...in durchläuft auch geerbte aufzählbare Eigenschaften. Es kann also nicht versprechen, dass der Schlüssel "name" | "age" ist. Die Lösungen stehen im nächsten Abschnitt. Verwende for...in bei Arrays überhaupt nicht.

Schlüssel und Werte eines Objekts durchlaufen

Object.entries liefert [key, value]-Paare und ist der übliche Weg, über ein Objekt zu iterieren. Object.keys gibt aus demselben Grund wie for...in string[] zurück. Wenn du weißt, dass das Objekt keine zusätzlichen Schlüssel hat, setze eine Assertion auf den Schlüsseltyp.

const prices = { tea: 2.5, coffee: 3.2, juice: 4 };

// Keys and values: key is string, value is number
for (const [item, price] of Object.entries(prices)) {
    console.log(`${item}: $${price.toFixed(2)}`);
}

// Typed keys: assert once, then index safely
type Item = keyof typeof prices; // "tea" | "coffee" | "juice"
for (const item of Object.keys(prices) as Item[]) {
    console.log(item, prices[item] * 2);
}

// Just the values
const total = Object.values(prices).reduce((sum, p) => sum + p, 0);
console.log(total); // 9.7

Für Daten, deren Schlüssel vorher nicht bekannt sind, typisierst du das Objekt als Record<string, number> oder nutzt eine Map; beides wird auf der Seite zum Dictionary behandelt.

while und do...while

while prüft seine Bedingung vor jedem Durchlauf; do...while führt den Rumpf einmal aus, bevor es prüft. Sie passen zu Schleifen, die keine Sammlung durchlaufen, etwa Lesen, bis eine Bedingung erfüllt ist. Narrowing funktioniert darin: Nach einer Prüfung !== undefined in der Bedingung ist die Variable im Rumpf eingeengt.

const queue: string[] = ["a", "b", "c"];

let next: string | undefined;
while ((next = queue.shift()) !== undefined) {
    console.log("processing", next.toUpperCase()); // next: string here
}

let attempts = 0;
do {
    attempts++;
    console.log("attempt", attempts);
} while (attempts < 2);

Labels, break und continue in verschachtelten Schleifen

Ein einfaches break verlässt nur die innerste Schleife. Um eine äußere Schleife zu verlassen, gibst du ihr ein Label und nennst es:

const grid: number[][] = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
];

let found: [number, number] | null = null;

outer: for (let row = 0; row < grid.length; row++) {
    for (let col = 0; col < grid[row].length; col++) {
        if (grid[row][col] === 5) {
            found = [row, col];
            break outer; // leaves both loops
        }
    }
}
console.log(found); // [ 1, 1 ]

Welche Schleife wofür