javascript - 传播 getElementsByClassName 或 querySelectorAll 会在 TypeScript 中产生错误

标签 javascript arrays typescript spread

我正在使用以下代码将 DOM 节点列表转换为数组:

const elements = [...document.getElementsByClassName(selector)];

但是使用 TypeScript 我会收到如下错误:Type 'HTMLCollectionOf<Element>' is not an array type or does not have a '[Symbol.iterator]()' method that returns an iterator.

我不确定在这种情况下我应该怎么做。我试着这样输入:

const elements: HTMLElement[] = [...document.getElementsByClassName(selector)];

但它不起作用。

这是我的 TypeScript 配置文件 ( tsconfig.json ):

{
    "compilerOptions": {
        "target": "es5",
        "module": "umd",
        "sourceMap": true,
        "outDir": "dist",
        "strict": true,
        "esModuleInterop": true,
        "downlevelIteration": true
    }
}

最佳答案

问题是默认情况下 Typescript 将默认使用 .slice。

您应该添加标志 --downlevelIteration 以使其适用于所有迭代器,包括 html 集合。

https://www.typescriptlang.org/docs/handbook/compiler-options.html

您应该将 dom.iterable 作为一个库才能工作。您目前没有指定 lib,因此根据您的目标使用默认值,这就是它不起作用的原因。

关于javascript - 传播 getElementsByClassName 或 querySelectorAll 会在 TypeScript 中产生错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57230148/

相关文章:

java - 形参类型声明中 double... 和 double[] 的区别

c++ - 为什么 C++ vector 内部元素/数组在按值传递时会被复制

arrays - 循环缓冲区中的最大连续总和

unit-testing - 使用 Material 图标和图像进行 Angular 2 单元测试

typescript - Angular 2 - 通过组件更改全局服务中的接口(interface)并更新另一个组件中更改的接口(interface)

javascript - NuxtJS 静态生成的 HTML 页面在调用/index.html 时不加载 Javascript

javascript - 将数据传递给堆积柱形图(Highcharts 框架)

javascript - React - 在 sibling 之间传递状态?

javascript - 如何从另一个上层目录快速提供静态文件?

javascript - 在 Typescript 或 Javascript 中按数字然后字母对对象键进行排序