为何TypeScript在setTimeout内的类型推断与外部不同？

以下代码片段会触发TypeScript类型错误：

useEffect(() => {
   if(!dragWrapperRef || !dragWrapperRef.current) return;
   setTimeout(() => {
      setDragWrapperHeight(dragWrapperRef.current.getBoundingClientRect().height + 'px');
   },500);
},[]);

current: HTMLDivElement | null. 'dragWrapperRef.current' is possibly 'null'.

相关定义如下：

type RefObj = {
    current: HTMLDivElement | null
}

const dragWrapperRef: RefObj | null = useRef(null);

但两种写法可以正常运行：

• 直接在setTimeout外部使用dragWrapperRef.current，类型可被正确推断：

useEffect(() => {
   if(!dragWrapperRef || !dragWrapperRef.current) return;
   setDragWrapperHeight(dragWrapperRef.current.getBoundingClientRect().height + 'px')
},[]);

• 在setTimeout外部将ref的current赋值给变量，在内部使用该变量：

useEffect(() => {
   if(!dragWrapperRef || !dragWrapperRef.current) return;
   const el = dragWrapperRef.current;

   setTimeout(() => {
       setDragWrapperHeight(el.getBoundingClientRect().height + 'px')
   },1000);
},[]);

请问为何直接在setTimeout作用域内使用ref时类型不被识别，而赋值给变量后却能正常推断？

原因解析 #

核心在于TypeScript类型守卫的作用域限制和闭包对可变引用的捕获逻辑：

1. 类型守卫的作用域边界
   你写的if(!dragWrapperRef || !dragWrapperRef.current) return;是一个类型守卫，它能在当前useEffect的同步执行代码块里，把dragWrapperRef.current的类型从HTMLDivElement | null窄化为HTMLDivElement。但这个类型窄化的效果仅局限于当前同步作用域，无法穿透到异步回调（比如setTimeout的回调函数）中。

2. Ref是可变对象，闭包捕获的是引用而非值
   dragWrapperRef是一个可变的引用对象，setTimeout的回调作为闭包，捕获的是dragWrapperRef这个对象本身的引用，而非当前current属性的具体值。TypeScript会考虑到：在延迟执行的这段时间里，dragWrapperRef.current有可能被其他代码修改为null，因此不会认为异步回调里的current依然是非null状态。

3. 赋值变量后的类型固化
   当你把dragWrapperRef.current赋值给const el时，el是一个不可变的常量，TypeScript会基于前面的类型守卫，把它的类型直接固化为HTMLDivElement。闭包捕获的是这个常量的具体值，后续dragWrapperRef.current的任何变化都不会影响el，所以TypeScript可以安全地推断el的类型是非null的。

内容的提问来源于stack exchange，提问作者mirja-t