TypeScript：键盘事件/事件类型和addEventListener的问题

Question

我编写了一个React汉堡菜单，使用常规JS/JSX可以正常运行，但使用TS/TSX时却无法正常运行。

问题出在我选择的keydown事件类型上（作为keyboardHandler函数的参数），显示以下错误：

“没有重载与此调用匹配。第1个重载（'（type：“keydown”，listener：（this：Document，ev：KeyboardEvent）=> any，options？：boolean | AddEventListenerOptions | undefined）：void'）出现以下错误。类型为'（e：KeyboardEvent）=> void'的参数'e'不能分配给类型'(this：Document，ev：KeyboardEvent) => any'的参数。参数'e'和'ev'的类型不兼容。类型'KeyboardEvent'缺少类型'KeyboardEvent'的以下属性：locale、nativeEvent、isDefaultPrevented、isPropagationStopped、persist。”

重载1与keyboardHandler的订阅相链接，通过组件的挂载，而重载2与其取消订阅相链接，通过组件的卸载。

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

export interface IBurgerMenu {
  toggled: boolean;
  navbar: boolean;
  setToggled: Dispatch<React.SetStateAction<boolean>>;
}

/* Props from Nav component */
const BurgerMenu: FC<IBurgerMenu> = ({ toggled, setToggled, navbar }) => {
  useEffect(() => {
    document.addEventListener("keydown", keyboardHandler, true);
    return () => {
      document.removeEventListener("keydown", keyboardHandler, true);
    };
  });

  // On/Off menu button
  const toggleMenu = () => {
    setToggled(!toggled);
  };

  // Closes menu if escape key pressed
  const keyboardHandler = (e: KeyboardEvent) => {
    if (e.key === "Escape") {
      setToggled(false);
    }
  };

  return (
   // Irrelevant HTML
  );
};

export default BurgerMenu;

如此建议：react typescript issue on addEvenListener和"No overload matches this call" for removeEventListener and addEventListener，已经尝试了以下方法：

• 使用Event代替KeyboardEvent。然而，在类型'Event'上不存在属性'key'。因此e.key成为一个问题。
• 使用any作为类型，这违背了TypeScript的目的。

感谢您的帮助。

- Y H R

---

不要使用React的KeyboardEvent，TypeScript有自己的声明。 - Hozeis

感谢您的信息，Hozeis。我之前并没有意识到这个细微差别。 - Y H R

Answer 1

在这里找到了解决方案，感谢aim97： 如何在TypeScript中检测按下的键？

我所需要做的就是在我的代码顶部添加这个接口：

interface KeyboardEvent {
  key: string;
}

- Y H R