使用in检测checkVisibility时TypeScript报‘never’类型错误的解决方法问询

问题的核心在于：TypeScript的官方DOM类型定义（lib.dom.d.ts）中，Element接口的checkVisibility被标记为必存在属性，但实际旧浏览器中该方法并不存在。当你用'checkVisibility' in element做判断时，TypeScript会认为false分支是不可能执行的路径，从而将该分支里的element推断为never类型，导致访问getClientRects时报错。

以下几种方法可以让第一种in操作符的写法正常工作：

方法1：扩展Element类型，将checkVisibility设为可选 #

创建一个全局类型声明文件（比如src/global.d.ts），覆盖官方的Element接口定义，把checkVisibility改为可选属性：

interface Element {
  checkVisibility?: () => boolean;
}

这样TypeScript会识别到checkVisibility可能不存在，'checkVisibility' in element的两个分支都会被正确推断类型：条件为true时element拥有该方法，false时element仍是标准Element类型，可正常访问getClientRects。

方法2：使用类型断言 #

在条件分支中直接对element做类型断言，明确指定其包含checkVisibility方法：

function isElementVisible(element: Element) {
    return ('checkVisibility' in element) 
      ? (element as Element & { checkVisibility: () => boolean }).checkVisibility() 
      : element.getClientRects().length > 0;
}

这种方式无需额外声明文件，但每次使用都要手动断言，适合临时场景。

方法3：自定义类型守卫函数 #

写一个类型守卫函数，帮助TypeScript正确推断类型：

function hasCheckVisibility(el: Element): el is Element & { checkVisibility: () => boolean } {
  return 'checkVisibility' in el;
}

function isElementVisible(element: Element) {
    return hasCheckVisibility(element) ? element.checkVisibility() : element.getClientRects().length > 0;
}

类型守卫会告诉TypeScript：当函数返回true时，参数el确实包含checkVisibility方法，从而让两个分支的类型都能被正确识别。

内容的提问来源于stack exchange，提问作者01 d'Nick