typescript - 输入'HTMLCollectionOf' 必须有一个返回迭代器的 '[Symbol.iterator]()' 方法

Question

我正在构建一个数组

const myCanvas = document.getElementsByTagName('canvas')

它实际上在工作。它返回给我的是这样的：

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

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

像这样：

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

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

我需要迭代返回我的HTMLCollection那个。getElementsByTagName输出是：

Type 'HTMLCollectionOf<HTMLCanvasElement>' must have a '[Symbol.iterator]()' method that returns an 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());
}

Answer 4

你可以像这样使用 for-of：

const menus = document.getElementsByClassName('navbar-menu');
for (const menusKey of Object.keys(menus)) {
  console.log(menus[menusKey]);
}