React组件内KeyboardEvent处理程序的编译器错误

Question

我正在使用TypeScript，并尝试编写一个React钩子，该钩子维护一组当前按下的所有键（并从“ keyup”上的键中删除键）。我正在尝试使用打字稿，但是在将事件处理程序作为回调传递给addEventListener时遇到以下类型错误：

Type '(e: KeyboardEvent<Element>) => void' is not assignable to type 'EventListener'. Types of parameters 'e' and 'evt' are incompatible.

代码如下：

export default function useMultiKeyPress() {
  let initialStateContents: [string?] = [];
  const [keysPressed, setKeyPressed] = useState(new Set(initialStateContents));

  function downHandler(e: React.KeyboardEvent) {
    setKeyPressed(keysPressed.add(e.key));
  }

  function upHandler(e: React.KeyboardEvent) {
    keysPressed.delete(e.key);
    setKeyPressed(keysPressed);
  }

  useEffect(() => {
    window.addEventListener("keydown", downHandler); // Argument of type '(e: KeyboardEvent<Element>) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
    window.addEventListener("keyup", upHandler); // Argument of type '(e: KeyboardEvent<Element>) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
    return () => {
      window.removeEventListener("keydown", downHandler); // Argument of type '(e: KeyboardEvent<Element>) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
      window.removeEventListener("keyup", upHandler); // Argument of type '(e: KeyboardEvent<Element>) => void' is not assignable to parameter of type 'EventListenerOrEventListenerObject'.
    };
  }, []);

  return keysPressed;
}