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

Question

如何创建customEvent Typescript并使用它？我在Mozilla网站上的javascript上找到了这个链接(https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent)

我只是在自定义事件上进行一些测试,但是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

接受的答案中描述的解决方案可以完成工作，但代价是失去类型安全性。

如果您想保持类型安全，我建议如下：

使用以下内容在源文件夹中创建dom.d.ts文件（或进行配置以确保 TS 编译器会在该文件夹中查找）：@typestypeRoots

interface CustomEventMap {
    "customnumberevent": CustomEvent<number>;
    "anothercustomevent": CustomEvent<CustomParams>;
}
declare global {
    interface Document { //adds definition to Document, but you can do the same with HTMLElement
        addEventListener<K extends keyof CustomEventMap>(type: K,
           listener: (this: Document, ev: CustomEventMap[K]) => void): void;
        dispatchEvent<K extends keyof CustomEventMap>(ev: CustomEventMap[K]): void;
    }
}
export { }; //keep that for TS compiler.

这将增强的函数的全局定义，以接受您的合成事件及其类型参数。documentaddEventListener

现在你可以这样做：

function onCustomEvent(event: CustomEvent<CustomParams>){
  this.[...] // this is Document
  event.detail ... //is your CustomParams type.
}
document.addEventListener('anothercustomevent', onCustomEvent);

这样您就可以输入并控制所有内容。

Answer 2

属性名称是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 3

CustomEvent是泛型类型。您可以将detail属性的类型作为参数传递（默认为any）。以下是它在lib.dom.d.ts（位于libnpm typescript 安装目录中）中的定义方式：

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 的新手，我发现扫描此文件并搜索“明显”类型非常有用。

Answer 4

最简单的方法是这样的：

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