TypeScriptでSpeechRecognitionの型をきちんと書く

TypeScript初心者の@akkadaskaです。
Web Speech APIというものを知り、これを使えば手軽に音声認識が使える！と思い触ってみましたが、TypeScriptでSpeechRecognition(webkitSpeechRecognition)の型が定義されていませんでした。
少し調べるとanyで解決する方法はいくつか出てきましたが、せっかくなのでTypeScriptの練習も兼ねてきちんとSpeechRecognitionの型定義を書いてみることにしました。
当方初心者ですので、間違いがあれば指摘していただけるとうれしいです！
#SpeechRecognitionの型定義を書く
まずはMDN Web Docsを参考に、SpeechRecognition(webkitSpeechRecognition)のプロパティ、イベントハンドラ、メソッドの型を、インターフェースISpeechRecognitionに定義しました。
grammarsやlangの型は、ここではstringにしましたが、もうすこし厳格に定義可能かもしれません。
ISpeechRecognitionEventはどうも仕様書(MDN Docs)とGoogle Chromeでの結果が異なるようなので、使いそうなもののみ記載しています。別途必要な定義がある場合は追加するか、anyを使う必要があるかもしれません。

i-speech-recognition.ts

interface ISpeechRecognitionEvent {
  isTrusted?: boolean;
  results: {
    isFinal: boolean;
    [key: number]:
      | undefined
      | {
          transcript: string;
        };
  }[];
}

interface ISpeechRecognition extends EventTarget {
  // properties
  grammars: string;
  lang: string;
  continuous: boolean;
  interimResults: boolean;
  maxAlternatives: number;
  serviceURI: string;

  // event handlers
  onaudiostart: () => void;
  onaudioend: () => void;
  onend: () => void;
  onerror: () => void;
  onnomatch: () => void;
  onresult: (event: ISpeechRecognitionEvent) => void;
  onsoundstart: () => void;
  onsoundend: () => void;
  onspeechstart: () => void;
  onspeechend: () => void;
  onstart: () => void;

  // methods
  abort(): void;
  start(): void;
  stop(): void;
}

export default ISpeechRecognition;

#windowの型にSpeechRecognitionを追加する
デフォルトのTypeScriptではwindowの型にSpeechRecognitionやwebkitSpeechRecognitionが定義されてないので、これらを追加した新しいwindowの型定義IWindowを書きました。

i-window.ts

import ISpeechRecognition from './i-speech-recognition';

// ISpeechRecognitionConstructorはコンストラクト可能でコンストラクトするとISpeechRecognitionの型定義を持つ
interface ISpeechRecognitionConstructor {
  new (): ISpeechRecognition;
}

//windowにISpeechRecognitionConstructorを定義にもつSpeechRecognitionとwebkitSpeechRecognitionを追加
interface IWindow extends Window {
  SpeechRecognition: ISpeechRecognitionConstructor;
  webkitSpeechRecognition: ISpeechRecognitionConstructor;
}

export default IWindow;

#作った型定義を使ってSpeechRecognitionを利用する
実際にSpeechRecognitionを使う場面では、windowの型定義を先程作成した新しい定義であるIWindowにしてあげます。

sample.ts

import IWindow from './i-window';

// windowの型定義にIWindowを使う
declare const window: IWindow;

// 型定義はISpeechRecognitionConstructor
const Recognition = window.webkitSpeechRecognition || window.SpeechRecognition;

// 型定義はISpeechRecognition
const recognition = new Recognition();

// 補完・型チェックができる！
recognition.lang = 'ja-JP';
recognition.interimResults = true;
recognition.continuous = true;

これで、無事にTypeScript環境でSpeechRecognitionが使えるようになりました。
しかも、anyを使っていないので、TypeScriptのメリットを生かすことができます！
#まとめ
このように、SpeechRecognitionの型定義を書いて、それを含む新しいwindowの定義を適用することで、TypeScript環境下でもSpeechRecognitionを利用することができるようになります。
余談ですが、ISpeechRecognitionのコードを書いているときにGitHub Copilotがものすごく適切なサジェストをしてくれたので、もっとよく調べれば、もしかしたら偉い人が書いたもっと良いコードが出てきたのかもしれません。ですが、ここでは練習のために自作してみました。
間違い、改善点などがあればぜひ指摘してください！