错误：TypeError: this.element.children.forEach 不是函数 - TypeScript

在开发 TypeScript 应用程序时，您可能会遇到 TypeError: this.element.children.forEach 不是函数 错误消息。 这个错误意味着您正在尝试在一个不支持forEach方法的对象上调用它。

问题

在 TypeScript 中，该错误通常发生在尝试循环遍历一个元素的子元素时。例如，下面的代码循环遍历一个列表中的所有项：

class List {
    private element: HTMLElement;

    constructor(elementId: string) {
        this.element = document.getElementById(elementId);
    }

    public makeListItemsActive() {
        this.element.children.forEach(item => {
            item.classList.add('active');
        });
    }
}

然而，当您尝试在这个类的实例上调用 makeListItemsActive 方法时，您会看到以下错误消息：

TypeError: this.element.children.forEach is not a function

原因

这个错误的原因是 this.element.children 返回的是 HTMLCollection 对象，而不是数组。HTMLCollection 对象没有 forEach 方法，这就是为什么您会看到该错误消息的原因。

解决方案

要解决这个错误，您需要将 HTMLCollection 转换成一个数组，然后再使用 forEach 方法。 您可以使用 Array.from 或 Array.prototype.slice.call 来转换 HTMLCollection 为数组，如下所示：

class List {
    private element: HTMLElement;

    constructor(elementId: string) {
        this.element = document.getElementById(elementId);
    }

    public makeListItemsActive() {
        const itemsArray = Array.from(this.element.children);

        itemsArray.forEach(item => {
            item.classList.add('active');
        });
    }
}

或者，您也可以使用 for 循环来遍历 HTMLCollection，而不需要将其转换为数组，如下所示：

class List {
    private element: HTMLElement;

    constructor(elementId: string) {
        this.element = document.getElementById(elementId);
    }

    public makeListItemsActive() {
        for (let i = 0; i < this.element.children.length; i++) {
            const item = this.element.children[i];
            item.classList.add('active');
        };
    }
}

无论您选择哪种方法，都可以解决您遇到的问题，并解决这个 TypeScript 错误！