Typescript 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' 类型的参数是 不可分配给类型参数 '事件监听器或事件监听器对象'。键入'（e：MouseEvent）=> void' 不可分配给类型“EventListener”。 参数“e”和“evt”的类型不兼容。 “Event”类型缺少“MouseEvent”类型中的以下属性：altKey、按钮、按钮、clientX 等 25 个。

我如何告诉 Typescript 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;
    ...
}

和第一个签名一样，type参数类型是DocumentEventMap和ev参数类型的关键K映射到DocumentEventMap[K]，编译器可以推断出回调函数中e的正确类型。