时间戳

首页 > 解决方案 > 有什么方法可以在反应打字稿项目中定义 addEventListener 和 classList 的类型

reactjs - 有什么方法可以在反应打字稿项目中定义 addEventListener 和 classList 的类型

问题描述

在我们的项目（React with typescript）中，我们使用下面的代码来添加和操作导航栏中选项卡的下划线。

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] Property 'addEventListener' does not exist on type 'EventListener'”和“[tslint] 'any' 的类型声明失去了类型安全性。考虑用更精确的类型替换它。（没有任何）”

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

任何帮助将非常感激。

谢谢

标签： reactjstypescripttypesaddeventlistener

解决方案

使用call本质上不是类型安全的。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");
    }
};

推荐阅读