الحلقات في 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: قيم المصفوفات والنصوص وMaps

يعمل for...of على أي شيء قابل للتكرار، ويأخذ متغير الحلقة النوع المناسب. وللحصول على الفهرس أيضًا، مرّ على 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. تفاصيل وقت التشغيل (الكائنات القابلة للتكرار والمولّدات) موجودة في صفحة JavaScript عن for...of وfor...in.

forEach: بلا break وبلا await

يستدعي forEach دالة لكل عنصر ويعيد undefined. وتأخذ معاملات دالة رد النداء أنواعها من المصفوفة، فلا حاجة إلى تصريح بالأنواع. وهناك أمران لا يستطيع فعلهما:

• التوقف مبكرًا. break داخل دالة رد النداء هو خطأ الترجمة TS1107، Jump target cannot cross function boundary. وreturn ينهي الاستدعاء الحالي فقط، فيتصرف مثل continue.
• انتظار العمل غير المتزامن. يتجاهل forEach الوعد الذي تعيده دالة رد نداء 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();

تنتهي دوال رد النداء في 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);

التسميات (labels) وbreak وcontinue في الحلقات المتداخلة

يخرج 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 ]

أي حلقة تستخدم