如何通过TypeScript或相关工具检测特定浏览器版本不支持的Web API？

1. ESLint + eslint-plugin-compat（最实用的实时检测方案） #

这是解决这类问题的核心工具，能在编码或lint阶段直接抛出兼容性警告：

• 安装依赖：npm install eslint-plugin-compat --save-dev
• 在ESLint配置文件中启用插件，并指定目标浏览器版本，比如针对Safari 16.6：

  {
    "plugins": ["compat"],
    "rules": {
      "compat/compat": "warn"
    },
    "settings": {
      "compat": {
        "targets": {
          "safari": ["16.6"]
        }
      }
    }
  }
  

• 它会扫描代码中所有Web API调用，对比兼容性数据库，一旦发现目标浏览器不支持的API（比如Safari 16.6的URLSearchParams.size），就会给出明确警告。也可以通过项目根目录的.browserslistrc文件统一管理浏览器目标，避免重复配置。

2. TypeScript配置优化（辅助约束） #

TS本身不会直接检测Web API的浏览器版本支持，但可以通过配置缩小类型范围，减少误用：

• 调整tsconfig.json中的target和lib：比如设置target为ES2020，lib为["ES2020", "DOM"]，这样TS不会提供超出ES2020和基础DOM范围的API类型提示。但部分新DOM API可能仍会被包含，需配合ESLint插件补充检测。
• 使用针对性的类型定义库：部分场景下可以安装对应浏览器版本的类型补充包，但这类资源较少，更多还是依赖ESLint的兼容性检测。

3. AI工具的辅助提示 #

Copilot这类工具可以在编码时提供兼容性提醒，但属于辅助手段：

• 在代码注释中明确标注目标浏览器（比如// 兼容Safari 16.6），Copilot在补全或编写代码时，会主动提示该API是否在目标版本中支持。
• 可以直接向Copilot询问某API的兼容性，但这种方式是被动的，无法覆盖所有代码路径，只能作为补充。

总结 #

最省心的方案是ESLint + eslint-plugin-compat，配合项目的浏览器目标配置，能在开发阶段自动检测所有不兼容的API调用，比搭建无头浏览器测试高效得多。TS的配置可以进一步约束类型范围，减少不必要的API暴露，但核心的兼容性检测还是要靠ESLint插件。

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