ES6 の for-of 文でプロパティの値と一緒に index の値も取得する

ES6 の for-of 文を使うとき, index の値も同時に取得したい状況が稀によくある.

これは Object.entries() の分割代入を行うことで実現できる:

const numArray = [0, 1, 2, 42]

for (const [index, num] of numArray.entries()) {
  console.log(`index: ${index}, num: ${num}`)
}

// index: 0, num: 0
// index: 1, num: 1
// index: 2, num: 2
// index: 3, num: 42

TypeScript の場合

TypeScript で target を ES5 以下にしているとき, デフォルトでは上記のコードはコンパイルエラーとなる (TypeScript 3.2 で確認):

TS2569: Type 'IterableIterator<[number, number]>' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.

エラーメッセージにあるように, --downlevelIteration オプションをつければコンパイルが通るようになる¹:

tsconfig.json

{
    "compilerOptions": {
        "downlevelIteration": true,
        "target": "es5"
    }
}

参考にした記事

• https://qiita.com/TakahiRoyte/items/dca532dd64bc782ad849
• https://stackoverflow.com/questions/34348937/access-to-es6-array-element-index-inside-for-of-loop

1. https://www.typescriptlang.org/docs/handbook/compiler-options.html ↩