如何创建一个自定义事件类型脚本并使用它?我在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);
6条答案
按热度按时间eit6fx6z1#
属性名称为
detail
而不是details
。正确的代码应为:a11xaf1n2#
在可接受的答案中描述的解决方案完成了工作,但代价是失去了类型安全。
如果您希望保持类型安全,我建议您采取以下措施:
使用以下代码在源代码的
@types
文件夹中创建dom.d.ts
文件(或配置typeRoots
以确保TS编译器将在那里查找):这将扩充
document
的addEventListener
函数的global definition,以接受您的合成事件及其类型化参数。现在您可以执行以下操作:
这样,您就可以输入所有内容并对其进行控制。
qqrboqgw3#
最简单的办法是这样:
oknrviil4#
CustomEvent
是一个泛型类型。您可以将detail
属性的类型作为参数传递(默认为any
)。下面是它在lib.dom.d.ts(位于npm typescript安装的lib
目录中)中的定义:在OP的例子中,
detail
的类型是number
。上面,我也使用了
lib.dom.d.ts
中的HTMLElement
类型。作为一个TypeScript的新手,我发现扫描这个文件并搜索“明显”的类型是非常有用的。fhity93d5#
最后我采用了一种不同的方法。相反,我创建了一个扩展EventTarget的 Package 类。
和用法如下:
s3fp2yjn6#
可能过于复杂但类型安全?