Typescript で TS2322 の対処方法

Typescript のエラーの1つ TS2322: Type ‘HTMLElement | null’ is not assignable to type ‘HTMLInputElement’.
の対処方法について記載します。

発生するソースコード


    let remainMinutes:HTMLInputElement;
    remainMinutes = document.getElementById("remainMinutes");
    remainMinutes.innerHTML="10"

このとき、2行目の document.getElementById の結果を remainMinutes にセットする行で
TS2322 のエラーが発生します。

原因

document.getElementById は、HTMLElement型または null を返します。
このとき、受け取り側である remainMinutes は HTMLInputElement 型であるため、
エラーが発生しています。

対処方法

document.getElementById の返り値を HTMLInputElement に変換します。


    let remainMinutes:HTMLInputElement;
    remainMinutes = <HTMLInputElement>document.getElementById("remainMinutes");
    remainMinutes.innerHTML="10"    

こうすることで、無事DOM要素に対して操作ができるようになります。

返信を残す

メールアドレスが公開されることはありません。