TypeScript已引入DOM库仍提示找不到SpeechGrammarList错误是什么原因？

问题原因 #

• 你使用的TypeScript 4.4.4版本内置的DOM类型库未收录SpeechGrammarList相关定义：Web Speech API中语法识别相关的接口属于实验性功能，早期TS版本没有将这部分非全标准实现的API纳入默认DOM类型集合。
• 部分浏览器对该API的实现带有私有前缀（如webkitSpeechGrammarList），全局无直接暴露SpeechGrammarList类型定义。

解决方案 #

方案1：安装社区维护的类型包（最推荐） #

社区已经提供了完整的Web Speech API类型定义，直接安装@types/dom-speech-recognition即可：

npm install @types/dom-speech-recognition --save-dev

安装完成后重启IDE的TypeScript服务即可生效，不需要额外修改配置。

方案2：手动补充全局类型定义 #

如果不想引入额外依赖，可以在项目src目录下新建全局声明文件（如global.d.ts），添加以下自定义类型：

// global.d.ts
interface SpeechGrammar {
  src: string;
  weight: number;
}

interface SpeechGrammarList {
  readonly length: number;
  item(index: number): SpeechGrammar | null;
  addFromURI(src: string, weight?: number): void;
  addFromString(string: string, weight?: number): void;
  [index: number]: SpeechGrammar;
}

declare var SpeechGrammarList: {
  prototype: SpeechGrammarList;
  new(): SpeechGrammarList;
};

保存后TS即可识别该类型，你可以根据实际使用需求调整类型的属性和方法。

方案3：升级TypeScript版本 #

5.0及以上版本的TypeScript已经在默认DOM类型库中补充了Web Speech API的相关定义，升级TS到最新稳定版也可解决问题：

npm install typescript@latest --save-dev

升级后注意检查项目中其他TS语法是否兼容新版本的严格规则。

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