添加带有函数参数的 EventListener

如何解决添加带有函数参数的 EventListener

我想为按钮添加一个事件监听器。应在单击时调用的函数作为参数传递。所以看起来像这样

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 中声明一个函数时，它可以工作：

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

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

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

为什么这样做，我如何将函数作为参数传递？

解决方法

只需为您的侦听器函数使用其他类型：

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

Playground

尽量避免大写的构造函数类型，如 Function、String、Number、Object

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

我意识到像 String 这样的类型会显示错误而不是字符串。它们之间有区别吗？

是的，是有区别的。 String、Number 是构造函数类型，非常类似于 Array。但是当你创建一个像 foo 这样的简单字符串时，你不会使用 String 构造函数，比如 String('foo')。您只需使用文字 foo。

请参阅docs