Typescript - 如何遍历 HTMLCollection

12 浏览
0 Comments

Typescript - 如何遍历 HTMLCollection

我对TypeScript还不熟悉，我正在尝试遍历通过document.getElementsByClassName()获取到的HTMLCollection。我的代码是：

let tag_list = document.getElementsByClassName("...") as HTMLCollectionOf;
for (const tag of tag_list) {
    //对tag.href做一些操作
}

但是出现了"TS2495: 类型 'HTMLCollectionOf' 不是数组类型或字符串类型。"这个错误。所以我应该如何防止这个错误的发生呢？

0

3 答案

0 Comments

Typescript - 如何遍历HTMLCollection的原因及解决方法

在使用Typescript时，有时我们需要遍历一个HTMLCollection对象，然而Typescript并不直接支持对HTMLCollection的遍历，这就导致了遍历HTMLCollection的问题。

解决这个问题的方法是通过将HTMLCollection对象转换为其他类型来遍历。一种常用的方法是先将HTMLCollection对象转换为any类型，然后再转换为我们想要的类型，如下所示：

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

这种方法虽然有些丑陋，但却相当有效。通过这种技巧，我们可以“欺骗”Typescript关于类型的判断。由于JavaScript可以轻松地遍历HTMLElement的子元素，通过这种方式欺骗Typescript，让JavaScript按照正常的方式进行遍历。

通过以上的方法，我们可以解决Typescript中遍历HTMLCollection对象的问题。希望这篇文章对你在开发过程中遇到的类似问题有所帮助。

0
0 Comments

Typescript - 如何迭代HTMLCollection

问题原因：

根据这个S.O.答案显示，这取决于编译设置。

解决方法：

1. 在tsconfig.json文件中进行以下设置：

{

"compileOnSave" : true,

"compilerOptions": {

"noImplicitAny" : true,

"target" : "ES2021",

"moduleResolution": "Node"

},

"exclude": [

"node_modules",

"dist"

]

}

2. 使用以下代码进行编译和运行：

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

以上代码可解决在Typescript中如何迭代HTMLCollection的问题。

0
0 Comments

问题的出现原因是因为HTMLCollectionOf<HTMLLinkElement>不是一个数组，因此无法进行迭代。解决方法是将其转换为数组，然后进行迭代。

首先，我们可以使用Array.from()方法将HTMLCollectionOf<HTMLLinkElement>转换为数组。代码如下：

const tag_list_array = Array.from(tag_list);

接下来，我们可以使用for...of循环来遍历数组。代码如下：

for (const tag of tag_list_array) {
    // 进行迭代操作
}

这样就可以对HTMLCollection进行迭代操作了。

然而，在实际操作中可能会遇到一个错误："Property 'from' does not exist on type 'ArrayConstructor.'"。这是因为TypeScript不支持Array.from()方法。

为了解决这个问题，我们可以手动定义ArrayConstructor接口，添加from()方法的定义。代码如下：

interface ArrayConstructor {
    from<T>(iterable: Iterable<T> | ArrayLike<T>): T[];
    from<T, U>(iterable: Iterable<T> | ArrayLike<T>, mapfn: (v: T, k: number) => U, thisArg?: any): U[];
}

通过添加这个接口定义，我们就可以在TypeScript中使用Array.from()方法了。

希望这篇文章对你有帮助！

0