לולאות ב-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, ולא צריך annotations.

לולאת 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, כל איטרציה מקבלת binding משלה, ולכן callback שנוצר בלולאה רואה את הערך של האיטרציה שלו.

for...of: ערכים של מערכים, מחרוזות ו-Maps

for...of עובד על כל דבר שהוא iterable, ומשתנה הלולאה מקבל את הטיפוס המתאים. כדי לקבל גם את האינדקס, עברו בלולאה על array.entries(), שמחזיר 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 יוצא מהלולאה ו-continue מדלג לפריט הבא, בדיוק כמו בלולאת for. הפרטים של זמן הריצה (iterables, generators) נמצאים בעמוד של JavaScript על for...of ו-for...in.

forEach: בלי break, בלי await

forEach קורא לפונקציה עבור כל איבר ומחזיר undefined. הטיפוסים של הפרמטרים של ה-callback נלקחים מהמערך, כך שלא צריך annotations. יש שני דברים שהוא לא יכול לעשות:

• לעצור מוקדם. break בתוך ה-callback הוא שגיאת הקומפילציה TS1107, Jump target cannot cross function boundary. return רק מסיים את הקריאה הנוכחית, ולכן הוא מתנהג כמו continue.
• לחכות לעבודה אסינכרונית. forEach מתעלם מה-promise שמחזיר 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

קל לפספס את המלכודת האסינכרונית, כי היא מתקמפלת בלי שום אזהרה:

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

ה-callbacks של forEach מסתיימים לפי סדר הטיימרים (10, 20, 30), אחרי שהלולאה כבר המשיכה הלאה. הגרסה עם for...of מריצה אותם בזה אחר זה. לעבודה מקבילית שבכל זאת מחכים לה, השתמשו ב-await Promise.all(items.map(async (item) => { ... })).

for...in: המפתחות הם מחרוזות

for...in עובר בלולאה על שמות המאפיינים ה-enumerable של אובייקט. הטיפוס של המפתח הוא תמיד 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 בכוונה: בזמן ריצה לאובייקט יכולים להיות יותר מאפיינים ממה שהטיפוס שלו מפרט (structural typing מאפשר מאפיינים נוספים), ו-for...in עובר גם על מאפיינים enumerable שעברו בירושה. לכן הוא לא יכול להבטיח שהמפתח הוא "name" | "age". התיקונים נמצאים בחלק הבא. הימנעו לגמרי מ-for...in על מערכים.

מעבר בלולאה על המפתחות והערכים של אובייקט

Object.entries נותן זוגות של [key, value] והוא הדרך המקובלת לעבור בלולאה על אובייקט. Object.keys מחזיר string[] מאותה סיבה ש-for...in עושה זאת, ולכן כשאתם יודעים שלאובייקט אין מפתחות נוספים, עשו assertion לטיפוס המפתח.

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; שניהם מוסברים בעמוד על dictionary.

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

Labels, break ו-continue בלולאות מקוננות

break רגיל יוצא רק מהלולאה הפנימית ביותר. כדי לצאת מלולאה חיצונית, תנו לה label וציינו את שם ה-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 ]

באיזו לולאה להשתמש