TypeScript 循环：for、forEach、for...of 与 for...in

TypeScript 的循环和 JavaScript 完全相同：for、for...of、for...in、while、do...while，以及数组方法 forEach。TypeScript 增加的是类型：for...of 的循环变量带有元素类型，而 for...in 的键永远是 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));

大多数遍历数组的场景都应该首选 for...of：它读起来清晰，支持 break、continue 和 await，而且不需要任何类型标注。

经典 for 循环

for (init; condition; update) 适合计数、每次跨多步或者倒序遍历。TypeScript 会根据初始值推断计数器的类型。

// 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);
}

用 let 而不是 var 声明计数器。使用 let 时每次迭代都有自己的绑定，所以在循环中创建的回调看到的是那一次迭代的值。

for...of：遍历数组、字符串和 Map 的值

for...of 适用于任何可迭代对象，循环变量会得到对应的类型。如果还需要索引，就遍历 array.entries()，它会产出 [index, value] 元组。

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 退出循环，continue 跳到下一项，和 for 循环中完全一样。运行时的细节（可迭代对象、生成器）见 JavaScript 的 for...of 与 for...in 页面。

forEach：不能 break，也不能 await

forEach 为每个元素调用一次函数，返回 undefined。回调的参数类型来自数组，所以不需要标注。它有两件事做不到：

• 提前停止。 在回调里写 break 是编译错误 TS1107，Jump target cannot cross function boundary.。return 只结束当前这次调用，所以效果和 continue 一样。
• 等待异步操作。 forEach 会忽略 async 回调返回的 promise。

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

异步的陷阱很容易被忽略，因为它编译时没有任何警告：

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();

forEach 的回调按定时器顺序（10、20、30）完成，而此时循环早已继续往下执行。for...of 版本则按顺序逐个执行。如果想并行执行又要等待全部完成，用 await Promise.all(items.map(async (item) => { ... }))。

for...in：键是字符串

for...in 遍历对象的可枚举属性名。键的类型永远是 string，数组也不例外，它的键就是字符串形式的索引。这让它在索引带类型的对象时很别扭：

// 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 有意把键的类型定为 string：运行时一个对象的属性可能比它的类型列出的更多（结构类型允许多余的属性），而且 for...in 还会遍历继承来的可枚举属性。因此它无法保证键一定是 "name" | "age"。解决方法见下一节。数组则干脆不要用 for...in。

遍历对象的键和值

Object.entries 返回 [key, value] 键值对，是遍历对象的常用方式。Object.keys 返回 string[]，原因和 for...in 相同，所以当你确定对象没有多余的键时，就对键的类型做断言。

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

对于事先不知道有哪些键的数据，把对象类型定为 Record<string, number> 或者使用 Map；两者在字典页面都有介绍。

while 与 do...while

while 在每轮之前检查条件；do...while 先执行一次循环体再检查。它们适合不是遍历集合的循环，比如一直读取直到某个条件成立。类型收窄在其中同样有效：条件里做了 !== undefined 检查之后，循环体中的变量就会被收窄。

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);

嵌套循环中的标签、break 和 continue

普通的 break 只会退出最内层的循环。要退出外层循环，就给它加上标签，并在 break 后写出标签名：

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 ]

该用哪种循环