HTML に入力フィールドがあったとします。

<input type="text" id="name" />

この入力フィールドに、TypeScript で値を入れたいとします。

const personName = document.getElementById("name");

personName.value = "田中";

すると、

image2

エラーが発生し、『プロパティ 'value' は型 'HTMLElement' に存在しません。』と指摘されました。

エラーを解除するには、型アサーションでHTMLElementの型を指定します。

書き方は、documentの前に、『<HTMLInputElement>』と書きます。

const personName = <HTMLInputElement>document.getElementById("name");

すると、

image3

エラーが解除されました。

image4

別の書き方として、getElementById の後ろに、『as HTMLInputElement』を指定する方法もあります。

const personName = document.getElementById("name") as HTMLInputElement;

image5

image6

こちらも、エラーは発生せず、valueは string 型であると指定されました。

なぜ、このエラーが発生するかというと、TypeScript は value や placeholder の型が自動で変換されないので、HTMLInputElement へ明示的に変換してあげる必要があります。

ブログ一覧