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");
    }
};

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

1 个答案: