TS 错误：“事件”类型缺少“键盘事件”类型中的以下属性答案

【问题标题】：TS error: Type 'event' is missing the following properties from type 'keyboardevent'TS 错误：“事件”类型缺少“键盘事件”类型中的以下属性
【发布时间】：2020-11-05 19:17:59
【问题描述】：

我有一个如下所示的自定义事件监听器钩子：

const useEventListener = (
  eventName: string,
  handler: ({key} : KeyboardEvent) => void,
) => {
  const savedHandler = useRef<({key} : KeyboardEvent) => void>(handler)

  useEffect(() => {
    savedHandler.current = handler
  }, [handler])

  useEffect(() => {
    const eventListener = (event: KeyboardEvent) => savedHandler.current(event)

    window.addEventListener(eventName, eventListener);

    return () => {
      window.removeEventListener(eventName, eventListener)
    }
  }, [eventName])
}

这是抛出错误，

TS error: Type 'event' is missing the following properties from type 'keyboardevent': char, key and 18 others

我是否输入了错误的 useRef？我也无法从 here 找到任何工作。不知道我在这里做错了什么。

【问题讨论】：

您的eventListener 需要KeyboardEvent，但您将它与addEventListener 签名一起使用，该签名采用string 作为事件名称，并且侦听器键入(e: Event) => void。无法保证它会为您提供KeyboardEvent，而这正是您的听众所需要的。
我认为eventName 不应该是任何string，这应该是一个特定的监听器字符串...

标签： javascript reactjs typescript react-hooks

【解决方案1】：

没关系。

工作解决方案将是

const useEventListener = (
    eventName: 'keydown' | 'keyup',
    handler: ({key} : KeyboardEvent) => void,
  ) => {
    const savedHandler = useRef<({key} : KeyboardEvent) => void>(handler)
  
    useEffect(() => {
      savedHandler.current = handler
    }, [handler])
  
    useEffect(() => {
      const eventListener = (event: KeyboardEvent) => savedHandler.current(event)
  
      window.addEventListener(eventName, eventListener);
  
      return () => {
        window.removeEventListener(eventName, eventListener)
      }
    }, [eventName])
  }

问题是eventName: string,

TS 看到您允许侦听任何事件（键盘与否），因此它不能保证发出的事件将是 only 键盘类型。所以你需要向 TS 保证你只会监听键盘事件。这可以通过为 eventName 提供正确的类型来完成，该类型应该是键盘事件名称的子集。

就是这样。

【讨论】：

Ts 如果你知道怎么做，那就太棒了。