JS转TS报错：event隐式any、never类型不存在contains属性

两个报错的对应修复逻辑 #

1. event参数隐式any问题 #

你是在window上绑定的原生DOM点击事件，不是React组件上绑定的合成事件，因此event不需要使用React导出的事件类型，直接标注原生DOM的MouseEvent类型即可。

2. ref.current不存在contains属性、类型为never问题 #

该报错是因为声明ref时没有传入泛型指定绑定的DOM元素类型，TS默认将ref.current推导为never类型，自然无法访问DOM实例上的contains方法。需要在调用useRef时传入对应DOM元素的类型泛型，初始化值设为null。 #

修复后完整代码 #

// 声明ref时指定绑定的DOM类型，比如绑定下拉容器div就用HTMLDivElement
const ref = React.useRef<HTMLDivElement>(null);
const [open, setOpen] = React.useState(false);

React.useEffect(() => {
    // 给事件参数标注原生MouseEvent类型
    const handleOutsideClick = (event: MouseEvent) => {
      if (window.innerWidth < 1024) {
        // 先判断ref.current存在，再将event.target断言为Node类型匹配contains方法的入参要求
        if (ref.current && !ref.current.contains(event.target as Node)) {
          if (!open) return;
          setOpen(false);
        }
      }
    };
    window.addEventListener("click", handleOutsideClick);
    return () => window.removeEventListener("click", handleOutsideClick);
}, [open, ref]);

补充说明 #

• 如果ref绑定的不是div元素，替换为对应标签的DOM类型即可：按钮用HTMLButtonElement、列表用HTMLUListElement，不确定具体标签可以用通用父类型HTMLElement
• 之所以把event.target断言为Node，是因为原生contains方法的入参要求是Node类型，而event.target的默认类型为EventTarget，直接传入会触发类型校验错误，加类型断言即可兼容。

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