添加带有函数参数的事件监听器

Question

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

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

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

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

尝试以这种方式添加事件侦听器会导致 TypeScript 提示“无法将来自类型“Function”的参数分配给类型为“(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);
    }

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

Answer 1

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


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

I realized that types like String show errors instead of string. Is there a difference between them?

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

请参阅docs

添加带有函数参数的事件监听器

Adding an EventListener with an function argument

javascript

function

event-handling

addeventlistener

typescript