"HTMLCollectionOf<HTMLCanvasElement>" 类型必须具有"[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> 类型一起使用。

我需要遍历由 getElementsByTagName 返回的 HTMLCollection。输出结果是：

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

- Jgascona

---

https://dev59.com/9FMH5IYBdhLWcg3w6VUv#76512245 - Harsh Patel

Answer 1

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

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

- Lessneek

---

如果使用VS Code，您可能需要重新启动IDE以使设置生效。 - vhs

谢谢，我还得重新启动我的实时构建监听器 wp-scripts，你也可以用 esnext 替换 ES6。 - redanimalwar

"dom.iterable" 对我来说解决了这个问题。 - xhafan

Answer 2

我在我的 tsconfig.json 文件中有这个：

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

我向lib中添加了dom.Iterable，结果输出不见了。现在它看起来像这样：

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

- Ilija Iličić

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());
}

- Fenton

---

好的，现在它正在工作，实际上以前也是这样，但有编译器错误。我不认为这取决于浏览器，因为我正在使用Chrome。谢谢Fenton！ - Jgascona

Answer 4

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

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

- AnasSafi

Answer 5

我面临的问题几乎相同，但类型不同。这里元素类型是HTMLElement，请看下面的错误信息。 -> 错误信息

类型 'HTMLCollection' 必须具有返回迭代器的 'Symbol.iterator' 方法

-> 解决方案 为了解决这个错误，我们可以使用Array.from(elem)方法。它可以从可迭代对象创建一个数组。

const currentElement = event.target as HTMLElement;
const index = Array.from(currentElement.children).indexOf(this.dropPlaceholder);

- Harsh Patel