React TSX中addEventListener绑定keydown事件KeyboardEvent类型不兼容报错

你代码中从React导入的KeyboardEvent是React封装的合成事件类型，仅适用于React组件内联绑定的键盘事件（比如<div onKeyDown={handler}>的handler参数）。而你通过document.addEventListener绑定的是原生DOM事件，对应的参数是原生KeyboardEvent类型，二者属性定义不匹配，因此触发了类型报错。

直接把keyboardHandler的参数类型指定为原生DOM的KeyboardEvent即可，有两种写法可选： #

方案1：移除React的KeyboardEvent导入，直接用全局原生类型 #

修改导入语句，删掉KeyboardEvent导入：

import React, { FC, Dispatch, useEffect } from "react";

然后修改事件处理函数的参数类型：

// 此处TS会自动识别KeyboardEvent为全局原生DOM类型
const keyboardHandler = (e: KeyboardEvent) => {
  if (e.key === "Escape") {
    setToggled(false);
  }
};

方案2：显式声明原生类型，避免命名冲突 #

如果你的代码里同时需要用到React合成事件的KeyboardEvent和原生类型，可以显式指定原生类型的来源避免冲突：

const keyboardHandler = (e: window.KeyboardEvent) => {
  if (e.key === "Escape") {
    setToggled(false);
  }
};

额外优化建议 #

你当前的useEffect没有传入依赖数组，会在组件每次重渲染时都重复执行事件绑定和解绑逻辑，建议补充依赖数组优化性能：

useEffect(() => {
  document.addEventListener("keydown", keyboardHandler, true);
  return () => {
    document.removeEventListener("keydown", keyboardHandler, true);
  };
}, [setToggled]); // setToggled是稳定引用，只会执行一次绑定/解绑

内容的提问来源于stack exchange，提问作者Y H R