如何在 TypeScript (Next.js) 中创建点击处理程序和 window.addEventListener？

Question

我有一个点击处理程序，我想监听组件外部窗口上的任何点击：

  useEffect(() => {
    const handleOutSideClick = (event) => {
      if (!ref.current?.contains(event.target)) {
        setNavActive(false)
      }
    };
    window.addEventListener('keydown', handleOutSideClick, false);
    return () => {
      window.removeEventListener('keydown', handleOutSideClick, false);
    };
  }, [ref]);

但是，我收到错误：

Parameter 'event' implicitly has an 'any' type.

（第2行） 和

Property 'contains' does not exist on type 'never'.

（第3行）

如何指定类型以使此点击处理程序正常工作？

Answer 1

您需要在参考中设置类型。 例如，如果你的 div 是一个 div 元素：

  const ref = useRef<HTMLDivElement>(null)