有什么方法可以在react typescript项目中定义addEventListener和classList的类型？

Question

在我们的项目（与打字稿反应）中，我们使用以下代码为导航栏中的标签添加和操作下划线。

public componentDidMount() {
        const tabs = document.getElementsByClassName("tab");

        Array.prototype.forEach.call(tabs, (tab: EventListener) => {
            tab.addEventListener("click", setActiveClass);
        });

        const setActiveClass = (event: any) => {
            Array.prototype.forEach.call(tabs, (tab: any) => {
                tab.classList.remove("active");
            });
            event.currentTarget.classList.add("active");
        };
    }.

打字稿引发以下错误：
“” [ts]属性'addEventListener'在类型'EventListener'上不存在”和“ [tslint]'any'的类型声明失去了类型安全性。请考虑将其替换为更精确的类型。（否）

我想添加适当的类型，而不是在代码中使用“ any”。 我也不想放宽“任何”的tslint规则

任何帮助将非常感激。

谢谢

Answer 1

本质上，使用call不是类型安全的。 调用的定义基本上会删除任何函数类型信息，因为它使用any ：

call(this: Function, thisArg: any, ...argArray: any[]): any;

如果您将forEach作为普通实例函数调用，则将正确推断出箭头函数的参数类型：

tabs.forEach(tab => {
    tab.addEventListener("click", setActiveClass);
});

const setActiveClass = (event: Event) => {
    tabs.forEach(tab => {
        tab.classList.remove("active");
    });
    if(event.currentTarget != null){
        (event.currentTarget as Element).classList.add("active");
    }
};