打字稿 addEventListener 设置事件类型

Question

我正在尝试这样做

document.addEventListener('click', (e: MouseEvent) => { ...

但是，Typescript 无法根据事件名称知道确切的事件类型。

'click' => MouseEvent

并认为 的类型e是Event。正如定义

declare type EventListenerOrEventListenerObject = EventListener | EventListenerObject;
    
interface EventListener {
    (evt: Event): void;
}
    
interface EventListenerObject {
    handleEvent(evt: Event): void;
}

它显然抱怨

TS2345：“(e: MouseEvent) => void”类型的参数不可分配给“EventListenerOrEventListenerObject”类型的参数。类型 '(e: MouseEvent) => void' 不能分配给类型 'EventListener'。参数“e”和“evt”的类型不兼容。“事件”类型缺少“鼠标事件”类型中的以下属性：altKey、按钮、按钮、clientX 和其他 25 个。

我怎么能告诉打字稿e是类型MouseEvent？或者，如果我更一般地问：如何addEventListener正确打字？

Answer 1

在 3.3.3333 版本中，他们在 lib.dom.ts 中定义了这种方式。

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

    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;

其中DocumentEventMap是一个接口，它扩展 了声明单击事件的GlobalEventHandlersEventMap。

interface GlobalEventHandlersEventMap {
    ...
    "click": MouseEvent;
    ...
}

如在第一签名，类型 paramater类型是一个关键ķ的DocumentEventMap和EV参数类型被映射到DocumentEventMap [ ķ ]，编译器可以推断出正确类型的回调函数电子。