TypeScriptでプロパティがHTMLElementで値が存在しないというエラーを解消する

こんなエラーです。

<select  id= "test">
    <option value= test1>test1</option>
    <option value= test2>test2</option>
    <option value= test3>test3</option>
</select>

上記の選択値を取得するときにdocument.getElementById("test").valueで取得しようとすると、エラーが発生しました。

メッセージはこのようなものです。

The property ‘test' does not exist on value of type 'HTMLElement'

document.getElementById(‘hoge’);の戻り値は、HTMLElement型で、この型のインターフェースにはvalueプロパティは存在しないようです。

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

こう解決します！

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

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

これで、valueで値を取得できます。

JavaScriptではエラーは発生しないはずですが。。。。

違いはもう少し勉強する必要がありますね。

参照

HTMLElementのリファレンス

HTMLInputElementのリファレンス