TypeScriptで遭遇したエラー: プロパティ 'style' は型 'Element' に存在しません。

遭遇したエラーと対処法について

エラー内容

Type 'HTMLCollectionOf<Element>' is not an array type or a string type.
(プロパティ 'style' は型 'Element' に存在しません。)

エラーの出たコード

複数のDOM要素を取得した後に、ループを回してスタイルプロパティを取得、表示しようとした。

const wallList = document.getElementsByClassName('wall');
for (let i = 0; i < wallList.length; i++) {
  const left = wallList[i].style.left; // <- エラー発生！！
  console.log(left);
}

const left = wallList[i].style.left;の部分で表題のエラーが発生している。

エラー原因

document.getElementsByClassNameの戻り値の型はHTMLCollectionOf<Element>になるが、Elementにはstyleプロパティが存在しないためエラーになっている。

HTMLElementにキャストする

ElementからstyleプロパティのあるHTMLElementにキャストすると解決する。

const wallList = document.getElementsByClassName('wall') as HTMLCollectionOf<HTMLElement>;
for (let i = 0; i < wallList.length; i++) {
  const left = wallList[i].style.left;
  console.log(left);
}