TypeScriptで document.getElementById("hoge").value をすると出るThe property ‘hoge' does not exist on value of type 'HTMLElement' というエラーを解消する

Last updated at 2018-05-25Posted at 2017-03-09

TypeScriptでElementの値を document.getElementById("hoge").value で取得しようとしたところエラーが出た。

##症状
document.getElementById(‘hoge’).value を使用すると、以下のエラーが生じる。

発生したエラー
The property ‘hoge' does not exist on value of type 'HTMLElement'

(意訳)‘hoge'というプロパティは HTMLElement 型の値には存在しない。

##エラーになる理由

document.getElementById(‘hoge’);の戻り値は、HTMLElement型で、エラーの文章にもある通り、この型のインターフェースにはvalueプロパティは存在しない

##どうすれば良いか

HTMLInputElementというHTMLElementを継承したインターフェースには、valueプロパティが存在するので、こちらにType Assertionすれば良い

const element: HTMLInputElement =<HTMLInputElement>document.getElementById(‘hoge');
const value: string = element.value;

参考にさせていただいたサイト