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

Question

I am building an Array with

const myCanvas = document.getElementsByTagName('canvas')

that it's actually working. It returns me something like this:

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

This is for a TypeScript project, I want to iterate this Array and transform each image in order to log it.

Like this:

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

(I am not using foreach because it doesn't works with HTMLCollectionOf<HTMLCanvasElement> type)

I need to iterate the HTMLCollection that getElementsByTagName is returning me. The output is:

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

Answer 1

In order to iterate that way you need to set compilerOptions like this:

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