【TypeScript】プロパティ 'style' は型 'Element' に存在しません。ts(2339) を解決する

TypeScriptのエラー解決擦るけど許して！

動作環境

TypeScript: 5.4.5
VSCode: 1.93.1

起きている問題

以下のようなコードにて、element.style.hogeのstyleがElement型には存在しないと表示されてしまう。

問題のあるコード

// 一部ボタンの色変更
const bottons = document.getElementsByClassName("e__btn")
for (let i = 0; i < bottons.length; i++) {
    const element = bottons[i] 
    element.style.border = border
    element.style.backgroundColor = backgroundColor
        //    ↑プロパティ 'style' は型 'Element' に存在しません ts(2339) 
}

このコードでは"e__btn"というクラスがついているElementを取得し、それらすべてに対して事前に設定したプロパティを代入しスタイルを変更するものになっている。

解決方法

解決方法としては、コード内のelement変数に代入する際bootons[]を'HTMLElement'に型アサーションを行うと良い。
上記の解決方法を踏まえ、コードを書き替えたものを以下に示す。

解決されたコード

const bottons = document.getElementsByClassName("e__btn")
for (let i = 0; i < bottons.length; i++) {
    const element = bottons[i] as HTMLElement  // ←変更箇所
    element.style.border = border
    element.style.backgroundColor = backgroundColor
}

TypeScriptでの型アサーションとは、他言語でいうところのキャスト・型変換だ。
型アサーションを行う場合は変数名 as 上書きする型または<上書きする型>変数名を使用することができる。

なんで型アサーションだけで解決した？

getElementsByClassNameメソッドが返していたHTMLCollectionOf<Element>特に配列内のElement型の説明は、MDN Web Docsで以下のように書かれています。

Element は Document が継承するオブジェクトの中にあるすべての要素オブジェクト（すなわち、要素を表現するオブジェクト）が継承する、もっとも一般的な基底クラスです。すべての種類の要素の共通するメソッドとプロパティのみを持ちます。もっと具体的なクラスが Element を継承しています。
Element - Web API | MDN より引用

つまり、Element型はHTML以外の要素になりえるため直接HTML要素を使用することはできないようです。そのため、HTML要素を表す具体的なクラスとしてHTMLElementを指定することによりstyleをはじめとするHTML要素を使用することができるようです。

参考