Vòng lặp for trong TypeScript: forEach, for...of và while

TypeScript có các vòng lặp (loop) giống JavaScript: for, for...of, for...in, while, do...while, và phương thức mảng forEach. Thứ TypeScript thêm vào là kiểu: biến lặp của for...of mang kiểu phần tử, còn khóa của for...in luôn là 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));

Với hầu hết các vòng lặp qua mảng, for...of là lựa chọn nên dùng: dễ đọc, hỗ trợ break, continue và await, và không cần chú thích kiểu.

Vòng lặp for cổ điển

for (init; condition; update) là vòng lặp để đếm, bước nhảy lớn hơn một, hoặc đi ngược. TypeScript suy ra kiểu của biến đếm từ giá trị ban đầu.

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

Khai báo biến đếm bằng let, không dùng var. Với let, mỗi lần lặp có binding riêng, nên một callback tạo ra trong vòng lặp sẽ thấy giá trị của đúng lần lặp đó.

for...of: giá trị của mảng, chuỗi và Map

for...of hoạt động trên mọi thứ iterable, và biến lặp mang kiểu tương ứng. Để lấy cả chỉ số, hãy lặp qua array.entries(), hàm này trả về các tuple [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 thoát khỏi vòng lặp còn continue nhảy sang phần tử tiếp theo, đúng như trong vòng lặp for. Chi tiết lúc chạy (iterable, generator) nằm ở trang JavaScript for...of và for...in.

forEach: không break, không await

forEach gọi một hàm cho mỗi phần tử và trả về undefined. Tham số của callback lấy kiểu từ mảng, nên không cần chú thích. Có hai việc nó không làm được:

• Dừng sớm. break bên trong callback là lỗi biên dịch TS1107, Jump target cannot cross function boundary. Còn return chỉ kết thúc lần gọi hiện tại, nên nó hoạt động như continue.
• Chờ công việc bất đồng bộ. forEach bỏ qua promise mà một callback async trả về.

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

Cái bẫy async rất dễ bị bỏ sót, vì code biên dịch mà không có cảnh báo nào:

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

Các callback của forEach kết thúc theo thứ tự hẹn giờ (10, 20, 30) sau khi vòng lặp đã đi tiếp. Phiên bản for...of chạy chúng tuần tự. Với công việc song song mà bạn vẫn muốn chờ, hãy dùng await Promise.all(items.map(async (item) => { ... })).

for...in: khóa là chuỗi

for...in lặp qua các tên thuộc tính enumerable của một đối tượng. Kiểu của khóa luôn là string, kể cả với mảng, nơi các khóa là chỉ số dưới dạng chuỗi. Điều đó gây khó khi truy cập một đối tượng có kiểu:

// 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 cố ý khai báo khóa là string: lúc chạy, một đối tượng có thể có nhiều thuộc tính hơn kiểu của nó liệt kê (structural typing cho phép thuộc tính thừa), và for...in còn duyệt cả các thuộc tính enumerable được kế thừa. Vì vậy nó không thể hứa khóa là "name" | "age". Cách sửa có ở phần tiếp theo. Đừng dùng for...in cho mảng.

Lặp qua khóa và giá trị của đối tượng

Object.entries trả về các cặp [key, value] và là cách thông dụng để lặp qua một đối tượng. Object.keys trả về string[] với cùng lý do như for...in, nên khi bạn biết đối tượng không có khóa thừa, hãy ép kiểu cho khóa.

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

Với dữ liệu mà khóa không biết trước, hãy khai báo đối tượng là Record<string, number> hoặc dùng Map; cả hai được trình bày ở trang dictionary.

while và do...while

while kiểm tra điều kiện trước mỗi lượt; do...while chạy thân vòng lặp một lần rồi mới kiểm tra. Chúng phù hợp với những vòng lặp không duyệt qua một tập hợp, chẳng hạn đọc cho đến khi một điều kiện thỏa mãn. Việc thu hẹp kiểu vẫn hoạt động bên trong: sau phép kiểm tra !== undefined ở điều kiện, biến được thu hẹp kiểu trong thân vòng lặp.

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

Nhãn, break và continue trong vòng lặp lồng nhau

break thông thường chỉ thoát vòng lặp trong cùng. Để thoát vòng lặp bên ngoài, hãy gắn nhãn cho nó và gọi tên nhãn:

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 ]

Nên dùng vòng lặp nào