类型 'HTMLCollectionOf<HTMLCanvasElement>' 必须有一个返回迭代器的 '[Symbol.iterator]()' 方法

Question

我正在构建一个数组

const myCanvas = documen.getElementsByTagName('canvas')

它实际上是有效的。它返回给我这样的东西：

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

这是一个 Typescript 项目，我想迭代这个数组并转换每个图像以记录它。

像这样：

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

（我没有使用 foreach 因为它不适用于 HTMLCollectionOf 类型）

我需要迭代 getElementsByTagName 返回给我的 HTMLCollection。输出是Type 'HTMLCollectionOf' 必须有一个返回迭代器的 'Symbol.iterator' 方法

Answer 1

为了以这种方式迭代，您需要compilerOptions像这样设置：

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

Answer 2

我的 tsconfig.json 中有这个：

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

我添加dom.Iterable到lib并且输出消失了。现在它看起来像这样：

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

Answer 3

可能值得检查您的 TypeScript/定义版本，因为我没有收到任何错误。我相信这些错误与某些较旧的浏览器实际上不支持 HTML 集合的迭代有关，因此您可以使用传统的 for 循环。

两个示例如下所示：

const myCanvas: HTMLCollectionOf<HTMLCanvasElement> = document.getElementsByTagName('canvas');

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

for (let i = 0; i < myCanvas.length; i++) {
  console.log(myCanvas[i].toDataURL());
}