TypeScript中如何确保useRef的current非null，解决contains属性不存在错误？

问题原因 #

你定义useRef(null)时，TypeScript会默认推断myElement.current的类型为null，所以调用contains方法时会触发类型错误——因为null上不存在该方法。

解决方案 #

1. 给useRef指定明确的元素类型 #

根据你实际使用的DOM元素类型（比如div对应HTMLDivElement，通用元素用HTMLElement），给useRef添加泛型约束：

// 替换HTMLDivElement为你实际绑定的元素类型
const myElement = useRef<HTMLDivElement | null>(null);

2. 严谨的类型检查（推荐） #

在调用contains前，先确认myElement.current存在，同时将e.target断言为Node（因为contains方法接收Node类型参数）：

const handleClickOutside = (e: MouseEvent) => {
  if (!colorPickerRef) {
    return;
  }

  if (myElement.current && !myElement.current.contains(e.target as Node)) {
       // do something
  }
};

3. 非空断言（谨慎使用） #

如果你能100%确保myElement.current在调用时一定不为null（比如已经在JSX中绑定了对应的元素），可以使用非空断言!跳过TypeScript的空值检查：

if (!myElement.current!.contains(e.target as Node)) {
     // do something
}

注意：如果current实际为null，非空断言会导致运行时错误，所以仅在确定ref已绑定DOM元素时使用。

关键前提 #

必须在JSX中将ref绑定到对应的DOM元素上，否则myElement.current永远是null：

// 示例：绑定到div元素
<div ref={myElement}>
  {/* 元素内容 */}
</div>

内容的提问来源于stack exchange，提问作者sir-haver