addEventListener mousemove 及其事件参数的正确打字稿类型是什么？

Question

问题： 如果不使用

any

，我的

onMouseMove

函数的正确输入是什么？

export class Main {
  private dTimer: number;

  constructor() {
    this.init();
  }

  private init() {
    this.mouseHandlers();
  }

  private mouseHandlers() {
    document.addEventListener('mousemove', this.onMouseMove)
  }

  private onMouseMove: EventListener = (event: MouseEvent) => {
    clearTimeout(this.dTimer);
    this.dTimer = setTimeout(() => {
      console.log(event.pageX, event.pageY)
    }, 500);
  }
}

Typescript 抱怨我的类型，我不知道如何在不使用

any

的情况下让它开心。

main.ts(38,3): error TS2322: Type '(event: MouseEvent) => void' is not assignable to type 'EventListener'.
  Types of parameters 'event' and 'evt' are incompatible.
    Type 'Event' is not assignable to type 'MouseEvent'.
      Property 'altKey' is missing in type 'Event'.

Answer 1

addEventListener mousemove 及其事件参数的正确打字稿类型是什么？

明确会让你自由：

onMouseMove: { (event: MouseEvent): void } = (event: MouseEvent) => {
}

或者，让 TypeScript 从赋值中推断出来 🌹:

onMouseMove = (event: MouseEvent) => {
}

Answer 2

我发现使用

MouseEventInit

作为事件类型可以解决问题。该类型来自 TypeScript

lib.dom.ts

。我正在使用 TypeScript 4.5.5。 即

private onMouseMove: EventListener = (event: MouseEventInit) => {
clearTimeout(this.dTimer);
this.dTimer = setTimeout(() => {
    console.log(event.pageX, event.pageY)
}, 500);}

Answer 3

我刚刚在 React 中遇到了这个问题，并想指出，当向 window 或任何 DOM 元素（而不是 React 组件）添加鼠标事件监听器时，我们需要使用全局 DOM MouseEvent 类型，无需导入。如果你像我一样使用 VSCode，你可能不小心从 React 自动导入了 MouseEvent！如果是这样，只需删除该导入即可。希望这对某人有帮助，干杯！

Answer 4

在这种情况下不需要显式类型，因为当您将处理程序分配给事件时，将检查函数的类型。寻找示例

onclick

：

onclick: (this: HTMLElement, ev: MouseEvent) => any;

有

onclick

处理程序类型。当你写：

myDomElement.onclick = myFunction;

每当

myFunction

 与 

onclick

 类型匹配时，

TypeScript 就会进行检查。所以，就像另一个答案所说的那样，让 TypeSript 推断类型。