Почему for...of подсвечивается красным в TypeScript, а обычный for — нет?

Если for...of подсвечивается красным в TypeScript, а обычный for — нет, скорее всего, проблема связана с тем, что объект, по которому вы пытаетесь итерироваться с помощью for...of, не является итерируемым.

for...of работает только с итерируемыми объектами (массивы, строки, Map, Set и т.д.). Если переменная не реализует интерфейс Iterable, TypeScript выдаст ошибку.

Пример:

const obj = { a: 1, b: 2 };

for (const item of obj) { // Ошибка: obj не итерируем
  console.log(item);
}

for (let key in obj) { // Работает, перебирает ключи
  console.log(key);
}

В отличие от for...of, обычный for или for...in может работать с объектами, перебирая их свойства.

Чтобы исправить ошибку, убедитесь, что используете for...of только с итерируемыми объектами.