javascript - 类型 '(e: CustomEvent) => void' 的参数不可分配给类型 'EventListenerOrEventListenerObject' 的参数

Question

我有这个自定义事件设置，它可以与 TypeScript 2.5.3 一起使用，但是当我更新到 2.6.1 时出现错误

window.addEventListener('OnRewards', (e: CustomEvent) => {
    // my code here
})

[ts] Argument of type '(e: CustomEvent) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.

Type '(e: CustomEvent) => void' is not assignable to type 'EventListenerObject'.

Property 'handleEvent' is missing in type '(e: CustomEvent) => void'.

我不确定在这里要做什么来解决这个问题。

Answer 1

这是由于 --strictFunctionTypes 的行为所致TypeScript v2.6 中添加了编译器标志。 (e: CustomEvent) => void 类型的函数不再被视为 EventListener 的有效实例，它采用 Event 参数，而不是 CustomEvent。

所以解决它的一种方法是关闭 --strictFunctionTypes。

---

另一种方法是传入一个接受 Event 的函数，然后通过类型保护将其缩小为 CustomEvent:

function isCustomEvent(event: Event): event is CustomEvent {
  return 'detail' in event;
}

window.addEventListener('OnRewards', (e: Event) => {
  if (!isCustomEvent(e))
    throw new Error('not a custom event');
  // e is now narrowed to CustomEvent ...
  // my code here 
})

---

第三种方法是使用 addEventListener() 的另一个重载:

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

如果 type 参数是已知事件类型的名称(K extends keyof WindowEventMap)，例如 “onclick”，则 listener 函数将期望其参数为缩小的事件类型 (WindowEventMap[K])。问题是 "OnRewards" 不是已知的事件类型...除非您使用 declaration merging 让知道:

// merge into WindowEventMap
interface WindowEventMap {
    OnRewards: CustomEvent
}

或者，如果你在一个模块中(任何带有 export 的东西)，使用 global augmentation :

// merge into WindowEventMap
declare global {
  interface WindowEventMap {
    OnRewards: CustomEvent
  }
}

然后像以前一样使用您的代码:

// no error!
window.addEventListener('OnRewards', (e: CustomEvent) => {
    // my code here
})

---

所以，这些是您的选择。你想选择哪一个取决于你。希望有所帮助；祝你好运!