TypeScript中SpeechRecognition API报‘cannot find name’，‘--lib dom’含义及解决方法

问题原因 #

提示里的Now provided by --lib dom意思是：Web Speech API的类型定义已经被整合到TypeScript官方的dom标准库中，不再需要单独安装@types/webspeechapi（这个包已被弃用）。如果你的项目没配置加载dom标准库，TypeScript就找不到SpeechRecognition、SpeechRecognitionEvent这些DOM相关的类型。

解决步骤 #

1. 检查并配置tsconfig.json的lib选项 #

打开项目根目录的tsconfig.json，找到compilerOptions下的lib数组，确保包含"dom"：

{
  "compilerOptions": {
    "lib": ["ESNext", "dom"], // 必须包含"dom"
    // 其他配置项...
  }
}

如果之前没有"dom"，添加后重启TypeScript服务（比如VSCode中按Ctrl+Shift+P，选择「TypeScript: Restart TS Server」）。

2. 处理webkitSpeechRecognition的类型兼容 #

webkitSpeechRecognition是Chrome等浏览器的前缀实现，TypeScript的dom库默认只暴露标准的SpeechRecognition类型，可任选以下一种方式处理：

方法一：使用类型断言

直接在创建实例时做类型断言：

recognition: SpeechRecognition | undefined;
this.recognition = new (window.webkitSpeechRecognition as typeof SpeechRecognition)();
this.recognition.onresult = (event: SpeechRecognitionEvent) => {
  // 你的业务逻辑
};

方法二：扩展全局Window类型

在项目中新建一个全局类型声明文件（比如src/global.d.ts），添加以下内容：

interface Window {
  webkitSpeechRecognition: typeof SpeechRecognition;
}

这样TypeScript会自动识别window.webkitSpeechRecognition的类型，后续代码无需额外断言。

验证 #

完成上述配置后，SpeechRecognition、SpeechRecognitionEvent以及webkitSpeechRecognition的类型报错应该都会消失。

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