有什么方法可以在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");
    }
};