Boucles en TypeScript : for, forEach, for...of et for...in

TypeScript a les mêmes boucles que JavaScript : for, for...of, for...in, while, do...while, et la méthode de tableau forEach. Ce que TypeScript ajoute, ce sont les types : la variable de boucle d'un for...of a le type des éléments, et la clé d'un for...in est toujours 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));

Pour la plupart des boucles sur un tableau, for...of est le bon choix : il se lit clairement, accepte break, continue et await, et ne demande aucune annotation.

La boucle for classique

for (init; condition; update) est la boucle pour compter, avancer par pas de plus de un, ou parcourir à l'envers. TypeScript infère le compteur à partir de sa valeur initiale.

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

Déclarez le compteur avec let, pas var. Avec let, chaque itération a sa propre liaison, donc un callback créé dans la boucle voit la valeur de cette itération.

for...of : les valeurs des tableaux, chaînes et Maps

for...of fonctionne sur tout ce qui est itérable, et la variable de boucle reçoit le type correspondant. Pour obtenir aussi l'indice, parcourez array.entries(), qui produit des tuples [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 quitte la boucle et continue passe à l'élément suivant, exactement comme dans une boucle for. Les détails d'exécution (itérables, générateurs) se trouvent sur la page JavaScript for...of et for...in.

forEach : ni break, ni await

forEach appelle une fonction pour chaque élément et renvoie undefined. Les paramètres du callback sont typés à partir du tableau, aucune annotation n'est donc nécessaire. Deux choses lui sont impossibles :

• S'arrêter tôt. break dans le callback est l'erreur de compilation TS1107, Jump target cannot cross function boundary. Un return ne termine que l'appel en cours, il agit donc comme continue.
• Attendre du travail asynchrone. forEach ignore la promesse renvoyée par 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

Le piège de l'asynchrone passe facilement inaperçu, car le code compile sans avertissement :

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

Les callbacks du forEach se terminent dans l'ordre des minuteurs (10, 20, 30), alors que la boucle est déjà passée à la suite. La version for...of les exécute l'un après l'autre. Pour un travail en parallèle que vous attendez quand même, utilisez await Promise.all(items.map(async (item) => { ... })).

for...in : les clés sont des strings

for...in parcourt les noms des propriétés énumérables d'un objet. Le type de la clé est toujours string, même pour les tableaux, dont les clés sont les indices sous forme de chaînes. Cela rend l'indexation d'un objet typé malcommode :

// 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 type volontairement la clé comme string : à l'exécution, un objet peut avoir plus de propriétés que son type n'en liste (le typage structurel autorise les propriétés en trop), et for...in parcourt aussi les propriétés énumérables héritées. Il ne peut donc pas promettre que la clé vaut "name" | "age". Les solutions sont dans la section suivante. Évitez complètement for...in sur les tableaux.

Parcourir les clés et les valeurs d'un objet

Object.entries donne des paires [key, value] et c'est la façon habituelle de parcourir un objet. Object.keys renvoie string[] pour la même raison que for...in : quand vous savez que l'objet n'a pas de clés en trop, faites une assertion sur le type des clés.

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

Pour des données dont les clés ne sont pas connues à l'avance, typez l'objet comme un Record<string, number> ou utilisez une Map ; les deux sont couverts sur la page dictionnaire.

while et do...while

while vérifie sa condition avant chaque passage ; do...while exécute le corps une fois avant de vérifier. Elles conviennent aux boucles qui ne parcourent pas une collection, par exemple lire jusqu'à ce qu'une condition soit remplie. Le narrowing fonctionne à l'intérieur : après une vérification !== undefined dans la condition, la variable est affinée dans le corps.

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 et continue dans des boucles imbriquées

Un break simple ne quitte que la boucle la plus interne. Pour quitter une boucle extérieure, donnez-lui un label et nommez ce label :

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 ]

Quelle boucle utiliser