Typescript@4.4+下@kamiazya/ngx-speech-recognition缺失类型问题求助

问题说明 #

使用@kamiazya/ngx-speech-recognition包时，缺失以下Web Speech API相关类型：

• SpeechGrammar
• SpeechGrammarList
• SpeechRecognition
• SpeechRecognitionErrorEvent
• SpeechRecognitionEvent
• webkitSpeechGrammarList
• webkitSpeechRecognition
• webkitSpeechRecognitionEvent

同时触发错误：TS2304: Cannot find name 'SpeechRecognitionError'，报错位置为node_modules/@kamiazya/ngx-speech-recognition/lib/service/speech-recognition.token.d.ts: 16:73。

解决方案 #

1. 安装官方类型声明包 #

这些缺失的类型属于Web Speech API，可通过安装对应的类型声明包快速解决：

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

2. 手动补充类型声明（安装包无效时） #

在项目src目录下创建typings.d.ts文件，添加以下内容：

interface SpeechGrammar {
  src: string;
  weight?: number;
}

interface SpeechGrammarList {
  new(): SpeechGrammarList;
  addFromString(string: string, weight?: number): void;
  item(index: number): SpeechGrammar;
  length: number;
}

interface SpeechRecognition extends EventTarget {
  new(): SpeechRecognition;
  continuous: boolean;
  interimResults: boolean;
  lang: string;
  maxAlternatives: number;
  grammars: SpeechGrammarList;
  start(): void;
  stop(): void;
  abort(): void;
  onresult: (event: SpeechRecognitionEvent) => void;
  onerror: (event: SpeechRecognitionErrorEvent) => void;
  onstart: () => void;
  onend: () => void;
}

interface SpeechRecognitionErrorEvent extends Event {
  error: string;
  message: string;
}

interface SpeechRecognitionEvent extends Event {
  resultIndex: number;
  results: SpeechRecognitionResultList;
}

interface SpeechRecognitionResultList {
  length: number;
  item(index: number): SpeechRecognitionResult;
}

interface SpeechRecognitionResult {
  length: number;
  item(index: number): SpeechRecognitionAlternative;
  isFinal: boolean;
}

interface SpeechRecognitionAlternative {
  transcript: string;
  confidence: number;
}

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

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

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

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

declare var webkitSpeechRecognition: {
  prototype: SpeechRecognition;
  new(): SpeechRecognition;
};

declare var webkitSpeechRecognitionEvent: {
  prototype: SpeechRecognitionEvent;
  new(type: string, eventInitDict?: SpeechRecognitionEventInit): SpeechRecognitionEvent;
};

// 补充报错的SpeechRecognitionError类型
type SpeechRecognitionError = SpeechRecognitionErrorEvent;

3. 配置tsconfig.json #

如果安装了类型声明包，确保tsconfig.json的types数组包含该类型：

{
  "compilerOptions": {
    "types": ["dom-speech-recognition"]
  }
}

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