'（e：CustomEvent）=>类型的参数void'不能赋值给'EventListenerOrEventListenerObject'类型的参数 [英] Argument of type '(e: CustomEvent) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'

问题描述

我有这个自定义事件设置，它适用于TypeScript 2.5.3 ，但是当我更新到 2.6.1 我收到错误

I have this custom event setup, and it works with TypeScript 2.5.3, but when I updated to 2.6.1 I get an error

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

[ ts]
类型'（e：CustomEvent）=> void'的参数不能赋值给'EventListenerOrEventListenerObject'类型的参数。

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

Type'（e： CustomEvent）=> void'不能分配给'EventListenerObject'类型。

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

类型'（e：CustomEvent）=> void'中缺少属性'handleEvent'。

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

我不确定该做些什么来解决这个问题。

I am not exactly sure what to do here to fix this.

推荐答案

这是由于 - strictFunctionTypes 编译器标志。类型的函数（e：CustomEvent）=> void 不再被视为 EventListener 的有效实例，它接受事件参数，而不是 CustomEvent 。

This is due to the behavior of the --strictFunctionTypes compiler flag added in TypeScript v2.6. A function of type (e: CustomEvent) => void is no longer considered to be a valid instance of EventListener, which takes an Event parameter, not a CustomEvent.

所以解决这个问题的一种方法是关闭 - strictFunctionTypes 。

So one way to fix it is to turn off --strictFunctionTypes.

另一种方法是传入一个带有事件的函数，然后缩小到 CustomEvent 通过类型保护：

Another way is to pass in a function that takes an Event and then narrows to CustomEvent via a type guard:

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;

如果类型参数是名称一个已知的事件类型（ K扩展keyof WindowEventMap ），如onclick，然后是监听器函数将期望其参数为该缩小的事件类型（ WindowEventMap [K] ）。问题是OnRewards不是已知的事件类型...除非你使用声明合并到使知道：

If the type parameter is the name of a known event type (K extends keyof WindowEventMap) like "onclick", then the listener function will expect its parameter to be of that narrowed event type (WindowEventMap[K]). The problem is that "OnRewards" is not a known event type... unless you use declaration merging to make it known:

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

或者，如果你在一个模块内（任何 export ），请使用全球扩张：

Or, if you're inside a module (anything with export in it), use global augmentation:

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

然后像以前一样使用你的代码：

Then use your code as before:

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

---

所以，这些都是您的选择。您要选择哪一个取决于您。希望有所帮助;祝你好运！

---

So, those are your options. Which one you want to choose is up to you. Hope that helps; good luck!

这篇关于'（e：CustomEvent）=>类型的参数void'不能赋值给'EventListenerOrEventListenerObject'类型的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！