☰

プロパティ 'value' は 'HTMLElement' 型の値に存在しません 質問する

tag-icon • tag-icon typescript
プロパティ 'value' は 'HTMLElement' 型の値に存在しません 質問する

私は TypeScript をいじっていて、入力ボックスにテキストが入力されると p 要素を更新するスクリプトを作成しようとしています。

HTML は次のようになります。

<html>
    <head>
    </head>
    <body>
        <p id="greet"></p>
        <form>
            <input id="name" type="text" name="name" value="" onkeyup="greet('name')" />
        </form>
    </body>
    <script src="greeter.js"></script>
</html>

そしてgreeter.tsファイル:

function greeter(person)
{
    return "Hello, " + person;
}

function greet(elementId)
{
    var inputValue = document.getElementById(elementId).value;

    if (inputValue.trim() == "")
        inputValue = "World";

    document.getElementById("greet").innerText = greeter(inputValue);
}

コンパイルすると、tsc次の「エラー」が発生します。

/home/bjarkef/sandbox/greeter.ts(8,53): The property 'value' does not exist on value of type 'HTMLElement'

ただし、コンパイラは JavaScript ファイルを出力し、これは Chrome では問題なく動作します。

なぜこのエラーが発生するのでしょうか? また、どうすれば修正できますか?

'HTMLElement'また、 TypeScript に従ってどのプロパティが有効であるかをどこで調べることができますか?

私は JavaScript と TypeScript に非常に不慣れなので、明らかなことを見逃している可能性があります。:)

ベストアンサー1

Tomasz Nurkiewicz の回答に基づくと、「問題」は、TypeScript がタイプセーフであることです。:) したがって、プロパティを含まないdocument.getElementById()型を返します。ただし、サブタイプにはプロパティが含まれています。HTMLElementvalueHTMLInputElementvalue

したがって、解決策としては、 の結果を次のようgetElementById()にキャストしますHTMLInputElement。

var inputValue = (<HTMLInputElement>document.getElementById(elementId)).value;

<>はTypescriptのキャスト演算子です。質問を参照してくださいTypeScript: HTMLElement のキャスト。

ファイル内である場合、.tsx上記のキャスト構文はエラーをスローします。代わりに次の構文を使用する必要があります。

(document.getElementById(elementId) as HTMLInputElement).value

上記の行から生成される JavaScript は次のようになります。

inputValue = (document.getElementById(elementId)).value;

つまり、型情報は含まれません。

おすすめ記事