使用 function 參數添加 EventListener

Question

我想向按鈕添加事件偵聽器。 應在單擊時調用的 function 作為參數傳遞。 所以看起來像這樣

public addButton(argFunction: Function) {
        const button: HTMLElement = document.createElement("button")

        button.addEventListener("click", argFunction);
    }

myclass.addButton(function(){
        console.log("test");
});

嘗試以這種方式添加事件偵聽器會導致 TypeScript 說“無法將類型“函數”的參數分配給類型為“（this：HTMLElement，ev：MouseEvent）=> any”的參數（由我粗略翻譯）。

當我在 addButton 中聲明一個 function 時，它可以工作：

public addButton(argFunction: Function) {
        const button: HTMLElement = document.createElement("button")

        var f = function () {
            console.log("f")
        };

        button.addEventListener("click", argFunction);
    }

為什么這行得通，我如何將 function 作為參數傳遞？

Answer 1

只需為您的聽眾 function 使用其他類型：

type Listener = (ev: MouseEvent) => void

// alternative way
interface Listener2 {
  (ev: MouseEvent): void
}


class Foo {
  public addButton(argFunction: Listener) {
    const button: HTMLElement = document.createElement("button")

    button.addEventListener("click", argFunction);
  }
}
const foo = new Foo()

foo.addButton(function () {
  console.log("test");
});

操場

盡量避免使用大寫的構造函數類型，例如Function 、 String 、 Number 、 Object

在 99% 的情況下，最好使用type Fn = (...args:any[])=>any而不是Function

我意識到像 String 這樣的類型顯示錯誤而不是字符串。 它們之間有區別嗎？

是的，這是有區別的。 String , Number是構造函數類型，很像Array 。 但是當你創建一個像foo這樣的簡單字符串時，你不會使用String構造函數，比如String('foo') 。 您只需使用文字foo 。

請參閱文檔