React中mouseMove事件处理函数参数类型报错，求助正确类型

你混淆了事件处理函数的类型和事件参数的类型：

1. 你看到的MouseEventHandler<HTMLButtonElement>是整个处理函数的类型，它本质是(event: React.MouseEvent<HTMLButtonElement>) => void，不能把它作为参数e的类型。
2. 直接用MouseEvent<HTMLButtonElement, MouseEvent>报错是因为：这是DOM原生的MouseEvent，它不是泛型；React封装了自己的事件对象，应该用React.MouseEvent<HTMLButtonElement>作为参数类型。

修正后的代码示例 #

方式一：直接给参数指定正确类型

function Button() {
  function handleMouseMove(e: React.MouseEvent<HTMLButtonElement>) {
    // 正常使用事件对象，比如e.clientX、e.currentTarget等
  }

  return (
    <button onMouseMove={handleMouseMove}>
      按钮内容
    </button>
  )
}

方式二：给整个处理函数标注MouseEventHandler类型

function Button() {
  const handleMouseMove: React.MouseEventHandler<HTMLButtonElement> = (e) => {
    // TS会自动推导e的类型为React.MouseEvent<HTMLButtonElement>
  }

  return (
    <button onMouseMove={handleMouseMove}>
      按钮内容
    </button>
  )
}

内容的提问来源于stack exchange，提问作者matt