Perulangan TypeScript: for Loop, forEach, for...of, for...in

TypeScript punya perulangan yang sama dengan JavaScript: for, for...of, for...in, while, do...while, dan method array forEach. Yang ditambahkan TypeScript adalah tipenya: variabel perulangan di for...of mendapat tipe elemen, dan key di for...in selalu bertipe 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));

Untuk sebagian besar perulangan array, for...of adalah pilihan utama: mudah dibaca, mendukung break, continue, dan await, serta tidak butuh anotasi.

for Loop Klasik

for (init; condition; update) adalah perulangan untuk menghitung, melangkah lebih dari satu, atau berjalan mundur. TypeScript menyimpulkan tipe penghitungnya dari nilai awalnya.

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

Deklarasikan penghitungnya dengan let, bukan var. Dengan let, setiap iterasi mendapat binding sendiri, jadi callback yang dibuat di dalam perulangan melihat nilai dari iterasi tersebut.

for...of: Nilai dari Array, String, dan Map

for...of bekerja pada apa pun yang iterable, dan variabel perulangannya mendapat tipe yang sesuai. Untuk mendapatkan indeksnya juga, lakukan perulangan atas array.entries(), yang menghasilkan 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 keluar dari perulangan dan continue melompat ke item berikutnya, persis seperti di for loop. Detail saat runtime (iterable, generator) ada di halaman JavaScript for...of dan for...in.

forEach: Tanpa break, Tanpa await

forEach memanggil sebuah fungsi untuk setiap elemen dan mengembalikan undefined. Parameter callback-nya diberi tipe berdasarkan array, jadi tidak perlu anotasi. Ada dua hal yang tidak bisa dilakukannya:

• Berhenti lebih awal. break di dalam callback adalah error kompilasi TS1107, Jump target cannot cross function boundary. return hanya mengakhiri pemanggilan yang sedang berjalan, jadi perilakunya seperti continue.
• Menunggu pekerjaan async. forEach mengabaikan promise yang dikembalikan 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

Jebakan async ini mudah terlewat, karena kodenya lolos kompilasi tanpa peringatan:

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

Callback forEach selesai sesuai urutan timer (10, 20, 30), setelah perulangannya sudah lanjut. Versi for...of menjalankannya secara berurutan. Untuk pekerjaan paralel yang tetap kamu tunggu, pakai await Promise.all(items.map(async (item) => { ... })).

for...in: Key Berupa String

for...in melakukan perulangan atas nama-nama properti enumerable sebuah object. Tipe key-nya selalu string, bahkan untuk array, yang key-nya adalah indeks dalam bentuk string. Itu membuatnya canggung untuk memberi indeks pada object yang bertipe:

// 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 sengaja memberi tipe string pada key: saat runtime, sebuah object bisa punya lebih banyak properti daripada yang tercantum di tipenya (structural typing mengizinkan properti tambahan), dan for...in juga menelusuri properti enumerable yang diwarisi. Jadi TypeScript tidak bisa menjanjikan bahwa key-nya adalah "name" | "age". Cara memperbaikinya ada di bagian berikutnya. Hindari for...in pada array sama sekali.

Perulangan atas Key dan Value Object

Object.entries menghasilkan pasangan [key, value] dan merupakan cara yang umum untuk melakukan perulangan atas sebuah object. Object.keys mengembalikan string[] dengan alasan yang sama seperti for...in, jadi kalau kamu tahu object-nya tidak punya key tambahan, lakukan assertion pada tipe key-nya.

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

Untuk data yang key-nya tidak diketahui sebelumnya, beri object itu tipe Record<string, number> atau pakai Map; keduanya dibahas di halaman dictionary.

while dan do...while

while memeriksa kondisinya sebelum setiap putaran; do...while menjalankan body-nya sekali sebelum memeriksa. Keduanya cocok untuk perulangan yang tidak menelusuri sebuah koleksi, misalnya membaca sampai suatu kondisi terpenuhi. Narrowing tetap bekerja di dalamnya: setelah pemeriksaan !== undefined di kondisi, tipe variabel itu dipersempit di dalam body.

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

Label, break, dan continue di Perulangan Bersarang

break biasa hanya keluar dari perulangan terdalam. Untuk keluar dari perulangan luar, beri label pada perulangan itu dan sebutkan label-nya:

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 ]

Perulangan Mana yang Dipakai