Typescript - 如何迭代遍历HTMLCollection

Question

我是Typescript的新手，正在尝试遍历通过document.getElementsByClassName()获取的HTMLCollection。我的代码如下：

let tag_list = document.getElementsByClassName("...") as HTMLCollectionOf<HTMLLinkElement>;
for (const tag of tag_list) {
    //do sth with tag.href
}

但事实证明，“TS2495：Type 'HTMLCollectionOf' 不是数组类型或字符串类型。”那么我该怎么做才能防止这个错误呢？

- Evian

Answer 1

HTMLCollectionOf<HTMLLinkElement>不是数组，因此您无法迭代它。所以，您需要将其转换为数组。

for (const tag of Array.from(tag_list)) {

希望这可以帮到你。

希望这可以帮到你。

- Nguyen Phong Thien

---

谢谢，但似乎“属性'from'在类型'ArrayConstructor'上不存在。” - Evian

这是，这里是ArrayConstructor。 - Nguyen Phong Thien

from(iterable: Iterable | ArrayLike): T[]; from(iterable: Iterable | ArrayLike, mapfn: (v: T, k: number) => U, thisArg?: any): U[]; }``` - Nguyen Phong Thien

Answer 2

正如这个 S.O. 回答所示，它取决于编译。

tsconfig.json：

{
  "compileOnSave"  : true,
  "compilerOptions": {
    "noImplicitAny"   : true,
    "target"          : "ES2021",
    "moduleResolution": "Node"
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

以下代码可以编译和运行：

const tds = document.getElementsByTagName('td') as HTMLCollectionOf<HTMLTableCellElement>;
for( const td of tds ) {
  Utils.onClick( td, ( event: UIEvent ) => this.place( event, 1, 1 ));
}

- Aubin

Answer 3

你可以通过先将Typescript转换为any，然后再转换为你想要的类型，来让它认为任何东西都是任意类型。就像这样：

for (const child of dom.children as any as HTMLElement[]) {
  ....
}

丑陋但有效的技巧，让你可以“欺骗”Typescript关于类型的问题。由于JavaScript可以轻松地迭代HTMLElement的子元素，像这样欺骗Typescript让JavaScript自己处理事情。

- Bill Burdick