[TypeScript]getElementId使用して気になったこと

AngularフレームワークでTypeScript を使用してたときにビルドエラーになってとりあえず調べた結果をまとめる。

エラー内容

以下のコードを書いていた。

<!-- HTML -->
<input type="file"　id="recorder">
<audio id="player" controls></audio>

// TypeScript
const recorder = document.getElementById("recorder");
const player = document.getElementById("voice-player");

recorder.addEventListener("change", function(e: Event) {
    const file = e.target.files[0];
    player.src = URL.createObjectURL(file);
});

player.srcでsrcは存在しないというエラー。

原因

playerの型がHTMLElement型になっていた。audioタグだしHTMLAudioElementが返ってくると勝手に思ってしまっていた。

.getElementById()はHTMLElement型で返ってくるので自分でキャストする必要があった。

以下のようにキャストした。

const player = <HTMLAudioElement>document.getElementById("voice-player");

これでビルド通ったけど、キャストする以外に方法はないのだろうか。

2020/02/03　追記

コメントにてキャストする以外の方法で
以下URLを参考にすればできました。
https://qiita.com/simochee/items/b3d4dc15f474f805573c