Question

如何创建customEvent Typescript并使用它？我在Mozilla网站（https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent）

上的javascript上找到了这个链接

我正在对自定义事件进行一些测试，但是Typescript将其视为错误。我计划做的是在details属性中添加一些额外的数据以便以后使用：这是我的代码。

let div:any=document.getElementById("my_div");

let c_event = new CustomEvent("build",{'details':3 });

div.addEventListener("build",function(e:Event){
    console.log(e.details);
}.bind(this));

div.dispatchEvent(c_event);

Answer 1

属性名称为detail，而非details。正确的代码必须是：

let div: any = document.getElementById("my_div");

let c_event = new CustomEvent("build",{detail: 3});

div.addEventListener("build", function(e: CustomEvent) { // change here Event to CustomEvent
    console.log(e.detail);
}.bind(this));

div.dispatchEvent(c_event);

Answer 2

最简单的方法是这样的：

window.addEventListener("beforeinstallprompt", ((event: CustomEvent) => {
   console.log("Whoop!");
}) as EventListener);

Answer 3

CustomEvent是通用类型。您可以将detail属性的类型作为参数传递（默认为any）。在lib.dom.d.ts（位于npm打字稿安装的lib目录中）中的定义如下：

interface CustomEvent<T = any> extends Event {
    /**
     * Returns any custom data event was created with. Typically used for synthetic events.
     */
    readonly detail: T;
    initCustomEvent(typeArg: string, canBubbleArg: boolean, cancelableArg: boolean, detailArg: T): void;
}

在OP的示例中，detail的类型为number。因此，以@Diullei的答案为基础：

let div: HTMLElement | null = document.getElementById("my_div");

let c_event = new CustomEvent<number>("build", {detail: 3});

div.addEventListener("build", function(e: CustomEvent<number>) { // change here Event to CustomEvent
    console.log(e.detail);
}.bind(this));

div.dispatchEvent(c_event);

以上，我还使用了HTMLElement中的lib.dom.d.ts类型。作为TypeScript的新手，我发现扫描此文件并搜索“明显”类型非常有用。

如何在Typescript中创建自定义事件？

3 个答案: