如何一次性告知TypeScript：ResizeObserver并非始终存在于window上？

API 探路者

2026-7-30

解决TypeScript中ResizeObserver特性检测的类型错误

问题原因

TypeScript的内置Window接口默认包含ResizeObserver类型（因为它属于标准DOM API），所以当你用"ResizeObserver" in window做特性检测时，TS会认为这个条件永远为true，导致else分支里的window类型被收窄成never，进而触发Property 'removeEventListener' does not exist on type 'never'错误。

一次性解决方案

方法1：全局扩展Window接口（推荐）

在项目的全局类型声明文件（比如src/global.d.ts）中，把ResizeObserver标记为可选属性，让TS知道它并非始终存在于window上：

declare global {
  interface Window {
    ResizeObserver?: typeof ResizeObserver;
  }
}

// 确保文件被当作模块处理（无其他export/import时需添加）
export {};

配置后，整个项目的TS都会识别到ResizeObserver是可选的，特性检测逻辑能正常收窄类型，else分支的window也会保持正确的Window类型。

方法2：自定义类型守卫

如果不想修改全局接口，可以写一个类型守卫函数，明确告知TS特性检测后的类型：

// 自定义类型守卫，判断window是否包含ResizeObserver
function hasResizeObserver(window: Window): window is Window & { ResizeObserver: typeof ResizeObserver } {
  return "ResizeObserver" in window;
}

// 使用示例
if (hasResizeObserver(window)) {
  // 这里TS明确知道ResizeObserver存在
  const observer = new window.ResizeObserver((entries) => {
    // 你的ResizeObserver处理逻辑
  });
} else {
  // 注意：原代码里的doFallBack()会立即执行函数，应传函数引用doFallBack
  window.addEventListener("resize", doFallBack, { passive: true });
}