如何为EventEmitter或EventTarget编写通用功能？

发布于 2025-02-07 22:58:52 字数 457 浏览 2 评论 0原文

我想编写一个通用addListener与任何eventtarget一起使用的函数。我想使用事件发射极的类型和事件名称来推断回调函数的参数，类似于addeventListener的工作方式。

本质上，我希望此代码不使用任何：

addListener(element, 'click', (event) => {
  // event is automatically inferred to be `MouseEvent`
  ...
});

我的用例是我想将事件目标选项polyfill 一旦和信号到达上节点eventemitter，其形状与eventtarget相似。我问有关事件标准的问题，因为它具有内置示例，并且我们的EventEmitter类型是自定义的。

原文

I want to write a generic addListener function that works with any EventTarget. I'd like to infer the callback function's parameters using the event emitter's types and the event name, similar to how addEventListener works.

Essentially, I want this code to work without using any:

addListener(element, 'click', (event) => {
  // event is automatically inferred to be `MouseEvent`
  ...
});

My use case is that I want to polyfill event target options like once and signal onto Node EventEmitters, which have a similar shape to EventTarget. I'm asking the question about EventTarget since it has built-in examples and our EventEmitter types are custom.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笑红尘 2025-02-14 22:58:52

您可以看到addeventListener的实现，

declare function addEventListener<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;

您会做类似的事情：

type ValidHandlers = {
    "click": "MouseEvent"
}
const addListener = <T extends keyof ValidHandlers>(element:any, type: T, callback: (event: ValidHandlers[T]) => void) => {

}
addListener({}, 'click', (event) => {
  // event is automatically inferred to be `MouseEvent`

});

如果您希望回调签名有所不同，只需执行相同的操作，而是定义整个功能签名。

type CallbackSignatures = {
    "click": (event: "MouseEvent", foobar: 123) => void,
    "foob": (baz: 'baz') => void
}
const addListener = <T extends keyof CallbackSignatures>(element:any, type: T, callback: CallbackSignatures[T]) => {

}
addListener({}, 'click', (event, foobar) => {

  // event is automatically inferred to be `MouseEvent`

});

You can see the implementation for addEventListener

declare function addEventListener<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;

You'd do something similar:

type ValidHandlers = {
    "click": "MouseEvent"
}
const addListener = <T extends keyof ValidHandlers>(element:any, type: T, callback: (event: ValidHandlers[T]) => void) => {

}
addListener({}, 'click', (event) => {
  // event is automatically inferred to be `MouseEvent`

});

If you want callback signatures to differ, just do the same thing but define entire function signatures.

type CallbackSignatures = {
    "click": (event: "MouseEvent", foobar: 123) => void,
    "foob": (baz: 'baz') => void
}
const addListener = <T extends keyof CallbackSignatures>(element:any, type: T, callback: CallbackSignatures[T]) => {

}
addListener({}, 'click', (event, foobar) => {

  // event is automatically inferred to be `MouseEvent`

});

回复收藏 0 原文

~没有更多了~