TypeScript：KeyboardEvent/Event 类型和 addEventListener 的问题

Question

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

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

没有重载与此调用匹配。重载 1 of 2, '(type: "keydown",listener: (this: Document, ev: KeyboardEvent) => any, options?: boolean | AddEventListenerOptions | undefined): void'，给出以下错误。类型“(e: KeyboardEvent) => void”的参数不可分配给类型“(this: Document, ev: KeyboardEvent) => any”的参数。参数“e”和“ev”的类型不兼容。类型“KeyboardEvent”缺少类型“KeyboardEvent”中的以下属性：区域设置、nativeEvent、isDefaultPrevented、isPropagationStopped、persist

Overload 1 of 2keyboardHandler通过组件安装链接到 的订阅addEventListener，Overload 2 of 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 issues on addEvenListener & "No override matches this call" for removeEventListener 和 addEventListener已尝试以下操作：

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

在此先感谢您的帮助。

Answer 1

在这里找到解决方案，感谢aim97：How to detector keypressed in TypeScript?

我所要做的就是在我的代码之上添加这个接口：

interface KeyboardEvent {
  key: string;
}