Typescript のエラーの１つ TS2322: Type 'HTMLElement | null' is not assignable to type 'HTMLInputElement'. の対処方法について記載します。
発生するソースコード
let remainMinutes:HTMLInputElement;
remainMinutes = document.getElementById("remainMinutes");
remainMinutes.innerHTML="10"
このとき、２行目の 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要素に対して操作ができるようになります。
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/18648e8b.7d833591.18648e8c.ed1bab3c/?me_id=1278256&item_id=18341447&m=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F4907%2F2000007474907.jpg%3F_ex%3D80x80&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Frakutenkobo-ebooks%2Fcabinet%2F4907%2F2000007474907.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
実践TypeScript【電子書籍】[ 吉井健文 ]
価格：3726円 (2019/7/23時点)
[
楽天で購入
](https://hb.afl.rakuten.co.jp/hgc/18648e8b.7d833591.18648e8c.ed1bab3c/?pc=https%3A%2F%2Fitem.rakuten.co.jp%2Frakutenkobo-ebooks%2F5456816fd8833397a6aa8b80647873ad%2F%3Fscid%3Daf_pc_bbtn&m=http%3A%2F%2Fm.rakuten.co.jp%2Frakutenkobo-ebooks%2Fi%2F18341447%2F%3Fscid%3Daf_pc_bbtn&link_type=picttext&ut=eyJwYWdlIjoiaXRlbSIsInR5cGUiOiJwaWN0dGV4dCIsInNpemUiOiIyNDB4MjQwIiwibmFtIjoxLCJuYW1wIjoicmlnaHQiLCJjb20iOjEsImNvbXAiOiJkb3duIiwicHJpY2UiOjEsImJvciI6MSwiY29sIjoxLCJiYnRuIjoxfQ==)
コメント