Bucles en TypeScript: for, forEach, for...of y for...in

TypeScript tiene los mismos bucles que JavaScript: for, for...of, for...in, while, do...while y el método de array forEach. Lo que añade TypeScript son los tipos: la variable de un for...of tiene el tipo de los elementos, y una clave de for...in siempre es un 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));

Para la mayoría de bucles sobre arrays, for...of es el que conviene: se lee bien, admite break, continue y await, y no necesita anotaciones.

El bucle for clásico

for (init; condition; update) es el bucle para contar, avanzar de más de uno en uno o recorrer hacia atrás. TypeScript infiere el contador a partir de su valor inicial.

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

Declara el contador con let, no con var. Con let, cada iteración tiene su propia variable, así que un callback creado dentro del bucle ve el valor de esa iteración.

for...of: valores de arrays, strings y maps

for...of funciona con cualquier iterable, y la variable del bucle recibe el tipo correspondiente. Para tener también el índice, recorre array.entries(), que produce tuplas [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 sale del bucle y continue salta al siguiente elemento, exactamente como en un bucle for. Los detalles de ejecución (iterables, generadores) están en la página de JavaScript sobre for...of y for...in.

forEach: sin break ni await

forEach llama a una función por cada elemento y devuelve undefined. Los parámetros del callback se tipan a partir del array, así que no hacen falta anotaciones. Hay dos cosas que no puede hacer:

• Detenerse antes. break dentro del callback es el error de compilación TS1107, Jump target cannot cross function boundary. Un return solo termina la llamada actual, así que actúa como continue.
• Esperar trabajo asíncrono. forEach ignora la promesa que devuelve un callback async.

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

La trampa asíncrona es fácil de pasar por alto, porque compila sin ningún aviso:

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

Los callbacks de forEach terminan en el orden de los temporizadores (10, 20, 30) cuando el bucle ya ha seguido adelante. La versión con for...of los ejecuta en secuencia. Para trabajo en paralelo que igualmente quieres esperar, usa await Promise.all(items.map(async (item) => { ... })).

for...in: las claves son strings

for...in recorre los nombres de las propiedades enumerables de un objeto. El tipo de la clave siempre es string, incluso en arrays, donde las claves son los índices en forma de string. Eso lo hace incómodo para indexar un objeto tipado:

// 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 tipa la clave como string a propósito: en tiempo de ejecución un objeto puede tener más propiedades de las que indica su tipo (el tipado estructural permite propiedades de más), y for...in también recorre las propiedades enumerables heredadas. Así que no puede garantizar que la clave sea "name" | "age". Las soluciones están en la siguiente sección. Evita for...in en arrays por completo.

Recorrer las claves y los valores de un objeto

Object.entries da pares [key, value] y es la forma habitual de recorrer un objeto. Object.keys devuelve string[] por el mismo motivo que for...in, así que cuando sabes que el objeto no tiene claves de más, haz una aserción del tipo de la clave.

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

Para datos cuyas claves no se conocen de antemano, tipa el objeto como Record<string, number> o usa un Map; los dos se explican en la página de diccionarios.

while y do...while

while comprueba su condición antes de cada pasada; do...while ejecuta el cuerpo una vez antes de comprobarla. Sirven para bucles que no recorren una colección, como leer hasta que se cumpla una condición. El estrechamiento funciona dentro de ellos: tras una comprobación !== undefined en la condición, la variable queda estrechada en el cuerpo.

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

Etiquetas, break y continue en bucles anidados

Un break simple solo sale del bucle más interno. Para salir de un bucle exterior, ponle una etiqueta y nómbrala:

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 ]

Qué bucle usar