用于循环 HTMLCollection 的打字稿

Question

我想遍历结果

document.getElementsByTagName("...");

它返回一个HTMLCollection，而不是一个数组。所以我不能简单地使用forEach。 以下是可能的，但看起来不太好：

let elements = document.getElementsByTagName("...");
for (var i = 0, m = elements.length; i < m; i++) {
    let element = elements[i];
}

对于 javascript，几乎存在完全相同的问题： For loop for HTMLCollection elements

显然，随着最新更新，现代浏览器支持：

var list = document.getElementsByClassName("events");
for (let item of list) {
    log(item.id);
}

但是打字稿编译器抱怨：

error TS2495: Type 'NodeListOf<HTMLParagraphElement>' is not an array type or a string type.

尽管如此，它仍然可以转换为正确的 Javascript。它甚至知道我在这里做什么，而不仅仅是复制源代码。编译后的输出是这样的：

var elements = main_div.getElementsByTagName("p");
for (var _i = 0, elements_1 = elements; _i < elements_1.length; _i++) {
    var element = elements_1[_i];
}

这很好，因为即使在旧浏览器上也支持生成的代码。但我想摆脱错误信息。

我的编译器选项是这样的：

{
    "compilerOptions": {

        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        "rootDir": "src",
        "lib": [
            "es2015",
            "dom"
        ]
    }
}

我确实尝试过编辑我的 lib 选项。这个特定的特性是 ES6 的一部分，并且已经被重新设计了几次。所以我在 lib 中测试了各种 ecmascript 版本，但找不到有效的设置。

Answer 1

如果要使用forEach，可以将其转换为数组

const elements: Element[] = Array.from(document.getElementsByTagName("..."));
elements.forEach((el: Element) => {
    // do something
})

Answer 2

打字稿编译器在指定一个额外的标志downlevelIteration后支持这一点：

{
    "compilerOptions": {
        "target": "es5",
        "downlevelIteration": true
    }
}

但是，这不仅会消除错误，还会更改编译器输出。 这个输入打字稿：

function compileTest(){
  let elements = document.getElementsByTagName("p");
  for(let element of elements){
    console.log(element);
  }
}

编译成这个javascript：

function compileTest() {
    var e_1, _a;
    var elements = document.getElementsByTagName("p");
    try {
        for (var elements_1 = __values(elements), elements_1_1 = elements_1.next(); !elements_1_1.done; elements_1_1 = elements_1.next()) {
            var element = elements_1_1.value;
            console.log(element);
        }
    }
    catch (e_1_1) { e_1 = { error: e_1_1 }; }
    finally {
        try {
            if (elements_1_1 && !elements_1_1.done && (_a = elements_1.return)) _a.call(elements_1);
        }
        finally { if (e_1) throw e_1.error; }
    }
}

Answer 3

要消除错误消息，您可以将列表添加为 any 类型。 Typescript 与 JavaScript 的区别在于 Type。因此，最好将类型添加到变量中。供您参考，我添加了 any 类型：

var list: any = document.getElementsByClassName("events");
for (let item of list) {
    console.log(item.id);
}

其实，这是一种典型的“上下文打字”。当表达式的类型由其位置隐含时，就会发生上下文类型。对于上面给出类型错误的代码，TypeScript 类型检查器使用 document.getElementsByClassName("events") 的类型来推断 ForLoop 函数的类型。如果此函数表达式不在上下文键入位置，则 list 将键入 any，并且不会发出错误。

如果上下文类型表达式包含显式类型 信息，上下文类型被忽略。

上下文类型适用于许多情况。常见情况包括 函数调用的参数、赋值的右侧、类型 断言、对象和数组字面量的成员以及返回 陈述。上下文类型也最好作为候选类型 通用类型。[来自 TypeScript 文档]

Answer 4

示例用法：

const inputs = document.getElementsByTagName("input");
for (let index = 0; index < inputs.length; index++) {
  const input = inputs.item(index);
}

Answer 5

我知道这是对这个问题的一个非常晚的答案，但认为在线程中可能会很好......在一个 Angular 项目中，我正在寻找一种使用数组解构的方法（谁不只是喜欢HTMLCollectionOf<T> 的数组解构 amiright?)，如下例所示：

const [zoomControl] = document.getElementsByClassName('leaflet-control-zoom');

但是会报错：

'Type 'HTMLCollectionOf' 必须有一个 'Symbol.iterator' 返回 iterator.ts(2488)'的方法

另外，我遇​​到过迭代集合会很好的场景，例如：

const elementsWithClassName = document.getElementsByClassName('class-name');
for(const a of elementsWithClassName) {
  console.log(a)
}

我发现添加了一个 global-types-extensions.d.ts 文件，内容如下：

declare global {
  interface HTMLCollectionOf<T extends Element> {
    [Symbol.iterator](): Iterator<T>;
  }
}
export {};

...修复了我从 TS 收到的错误/警告。

所以现在，我可以愉快地绕过数组解构并在任何 HTMLCollectionOf 上使用 for...of ??。