Question

我有一个自here派生的自定义useEventListener钩子，我刚开始学习Typescript，所以我决定将其重写为一个有类型的版本。

这是我的钩子，

const useEventListener = (
  eventName: string,
  handler: any,
) => {
  const savedHandler: any = useRef()

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

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

    window.addEventListener(eventName, eventListener);

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

我将其用作

const keyPressHandler = useCallback(({ key }: KeyboardEvent) => {
  if (key === 'ArrowUp')
    // do something
  else if (key === 'ArrowDown')
    // do something else
})

useEventListener('keydown', keyPressHandler)

这是一个相对简单的设置，但我一直在敲打打字方面的知识。摆脱{p}中的any

const savedHandler: any = useRef()

或在

const eventListener: any = (. . .

使编译器抱怨，我不知道该如何解决。在这种情况下，savedHandler是什么类型？对于const eventListener，为什么它甚至需要一个类型？

Answer 1

对于saveHandler，您可以按如下所示键入useRef：

const savedHandler = useRef<YOURHTMLELEMENTTYPE>();

对于YOURHTMLELEMENTTYPE，您可以选择任何following，这取决于您引用的元素。

对于eventListener，我建议使用this post。我认为这篇文章描述了您的确切问题。

在自定义钩子中为事件处理程序分配类型

1 个答案: