TS 錯誤：“事件”類型缺少“鍵盤事件”類型中的以下屬性

Question

我有一個自定義事件監聽器鈎子，如下所示：

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 不正確嗎？ 我也無法從這里找到任何有用的東西。 不知道我在這里做錯了什么。

Answer 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 看到您允許偵聽任何事件（鍵盤與否），因此它不能保證發出的事件將只是鍵盤類型。 所以你需要向 TS 保證你只會監聽鍵盤事件。 這可以通過為 eventName 提供正確的類型來完成，該類型應該是鍵盤事件名稱的子集。

而已。