typescript - El tipo 'HTMLCollectionOf' debe tener un método '[Symbol.iterator]()' que devuelva un iterador

Estoy construyendo un arreglo con

const myCanvas = document.getElementsByTagName('canvas')

que en realidad está funcionando. Me devuelve algo como esto:

images: [
  0: canvas,
  1: canvas,
  2: canvas
]

Esto es para un proyecto de TypeScript, quiero iterar este Array y transformar cada imagen para poder registrarla.

Así:

for (const image of myCanvas) {
  console.log(canvas.toDataURL());
}

(No estoy usando foreach porque no funciona con el tipo HTMLCollectionOf<HTMLCanvasElement>)

Necesito iterar el HTMLCollection que getElementsByTagName me está devolviendo. La salida es:

Type 'HTMLCollectionOf<HTMLCanvasElement>' must have a '[Symbol.iterator]()' method that returns an iterator

Respuesta #1

Para iterar de esa manera necesitas configurar compilerOptions así:

"compilerOptions": {
        // ...
        "target": "ES6",
        "lib": [
            "DOM",
            "DOM.Iterable",
            "ES6"
        ]
        // ...
    }

Respuesta #2

Tengo esto en mi tsconfig.json:

"compilerOptions": {
  // ...
  "target": "es2015",
  "module": "es2020",
  "lib": [
    "es2018",
    "dom"
  ]
  // ...
}

Agrego dom.Iterable a lib y la salida desaparece. Ahora se ve así:

"compilerOptions": {
  // ...
  "target": "es2015",
  "module": "es2020",
  "lib": [
    "es2018",
    "dom",
    "dom.Iterable"
  ]
  // ...
}