l08084のブログ

技術記事の執筆は、祈りに近い

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);
}

as HTMLCollectionOf<HTMLElement>でキャストすることにより、エラーが消えた。

参考サイト

github.com