TypeScript检测多键盘按键时报key隐式any类型错误如何解决？

报错解决方法 #

你的报错是因为TypeScript无法推断键盘事件回调的入参类型，你只需要给两个事件处理函数的参数指定原生KeyboardEvent类型即可，key是该类型内置属性，类型为string。

修正后的完整代码如下：

import { useState, useEffect } from "react";

export default function useMultiKeyboardPress() {
  // 显式指定state类型为存储字符串的Set
  const [keysPressed, setKeyPressed] = useState<Set<string>>(new Set([]));

  // 给入参指定KeyboardEvent类型
  function downListenerHandler({ key }: KeyboardEvent) {
    // 不要直接修改原state，返回新的Set实例才会触发重渲染
    setKeyPressed(prev => new Set(prev).add(key));
  }

  const upListenerHandler = ({ key }: KeyboardEvent) => {
    setKeyPressed(prev => {
      const newSet = new Set(prev);
      newSet.delete(key);
      return newSet;
    });
  };

  useEffect(() => {
    window.addEventListener("keydown", downListenerHandler);
    window.addEventListener("keyup", upListenerHandler);
    return () => {
      window.removeEventListener("keydown", downListenerHandler);
      window.removeEventListener("keyup", upListenerHandler);
    };
  }, []);

  return keysPressed;
}

补充说明：你原有写法直接修改了作为state的Set实例，由于引用类型的引用地址没有变化，即使调用setKeyPressed也不会触发组件重渲染，修正后的写法规避了该问题。

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