【TypeScript】Property “style” does not exit on type “Element” が出たときの対処法

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

TypeScriptの解説シリーズです。

今回はProperty “style” does not exit on type “Element” が出たときの対処法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

エラーの対策がわかる！

Property “style” does not exit on type “Element” が出たときの対処法
まとめ

Property “style” does not exit on type “Element” が出たときの対処法

エラー発生方法

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

const list = document.getElementsByClassName("test");

for (let i = 0; i < list.length; i++) {
  // styleを変更したいがエラーが発生する
  list[i].style.width = "100px";
}

このように、複数のHTML要素を配列化し、
ループでスタイルを当てようとした際にエラーが発生します。

原因

getElementsByClassNameの戻り値であるHTMLCollectionOf＜Element＞にstyleプロパティが存在しないから

document.getElementByClassIdでは発生しないよ！

対策方法

結論：Element → HTMLElementにキャスト(型変換)する

キャストする構文

XXX as HTMLCollectionOf<HTMLelement>

実際の対策コード

// HTMLCollectionOfにキャストする
const list = Array.from(document.getElementsByClassName("test") as HTMLCollectionOf<HTMLelement>);

list.forEach((element) => {
  element.style.width = "100px"
})

キャストしたらforEach関数も使えるようになるよ！

まとめ

Property “style” does not exit on type “Element” が出たときにはElement → HTMLElementへキャストする

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram