BinaryDevelop
  1. ホーム
  2. typescript

[解決済み】プロパティ 'value' が 'HTMLElement' 型の値に存在しない。

2022-01-25 13:35:14

質問

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 以下の"error"が発生します。

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

しかし、コンパイラはjavascriptファイルを出力し、それはクロームでうまく動作します。

どうしてこのエラーが出るのでしょうか？また、どうすれば直せますか？

また、どのプロパティが 'HTMLElement' タイプスクリプトによると？

私はjavascriptとtypescriptに非常に慣れていないので、何か明らかなことを見逃しているかもしれないことに注意してください :)

どのように解決するのですか？

Tomasz Nurkiewiczの回答からすると、typescriptはtypesafeであることが問題であるようです。） ですから document.getElementById() は型を返します。 HTMLElement を含まないもの。 value プロパティを指定します。サブタイプ HTMLInputElement しかし value プロパティを使用します。

そこで、解決策としては getElementById() を HTMLInputElement このように 

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

<> は、タイプスクリプトのキャスティング演算子です。質問を見る TypeScript: HTMLElement のキャスティング .

上の行から得られるjavascriptは、次のようになります。 

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

つまり、型情報を含まない。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します