for...of

Поширена помилка, з якою стикаються початківці розробники JavaScript, полягає в тому, що for...in для масиву не виконує ітерації по елементах масиву. Замість цього він повторює ключі переданого об’єкта. Це продемонстровано в прикладі нижче. Тут ви очікуєте 9,2,5 , але ви отримаєте індекси 0,1,2:

var someArray = [9, 2, 5];
for (var item in someArray) {
    console.log(item); // 0,1,2
}

Це одна з причин, чому for...of існує в TypeScript (і ES6). Наступне виконує ітерацію по масиву, правильно повертаючи значення, як очікувалося:

var someArray = [9, 2, 5];
for (var item of someArray) {
    console.log(item); // 9,2,5
}

Подібним чином TypeScript не має проблем із переглядом рядка символ за символом за допомогою for...of:

var hello = "is it me you're looking for?";
for (var char of hello) {
    console.log(char); // це мене ти шукаєш? 
}

JS Generation

Для цього TypeScript генеруватиме стандартний тип циклу for (var i = 0; i < list.length; i++) . Наприклад, ось що буде згенеровано для нашого попереднього прикладу:

var someArray = [9, 2, 5];
for (var item of someArray) {
    console.log(item);
}

// перетворюється в //

for (var _i = 0; _i < someArray.length; _i++) {
    var item = someArray[_i];
    console.log(item);
}

Ви бачите, що використання for...of робить код більш зрозумілими, а також зменшує кількість коду, який вам потрібно написати (та імен змінних, які вам потрібно придумати).

Limitations

Обмеження.

Якщо ви не націлені на ES6 або вище, згенерований код припускає, що властивість length існує в об’єкті та що об’єкт можна індексувати за допомогою чисел, наприклад obj[2] . Тому він підтримується лише для string та array для сумісницьтва з застарілими механізмами JS.

Якщо TypeScript бачить, що ви не використовуєте масив або строку, він видасть вам явну помилку "is not an array type or a string type";

let articleParagraphs = document.querySelectorAll("article > p");
// Помилка: Nodelist не є типом масиву чи рядка
for (let paragraph of articleParagraphs) {
    paragraph.classList.add("read");
}

Використовуйте for...of лише в тому припаді, якщо змінна є масивом або строкою. Зауважте, що це обмеження може бути видалено в майбутній версії TypeScript.

Summary

Ви були б здивовані, скільки разів ви будете повторювати елементи масиву. Наступного разу, коли ви це робите, використовуйте for...of Ви можете просто порадувати наступну людину, яка буде перевіряти ваш код.