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）=>无效' 无法分配给“ EventListener”类型。参数“ e”和“ evt”的类型不兼容。 “事件”类型缺少“鼠标事件”类型中的以下属性：altKey，button，buttons，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推断正确的类型。

Typescript addEventListener设置事件类型

1 个答案: