プロパティ「値」は、タイプ「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に非常に慣れていないので、明らかなものがない場合があることに注意してください。:)

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

解決策は、その結果をキャストすることであるようgetElementById()にHTMLInputElement、このように：

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

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

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

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

つまり、タイプ情報を含みません。

反応を使用している場合は、as演算子を使用できます。

let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;

更新する要素をHTMLInputElementにキャストしてみてください。他の回答で述べたように、これは特定のタイプのHTMLElementであることをコンパイラーに示唆する必要があります。

var inputElement = <HTMLInputElement>document.getElementById('greet');
inputElement.value = greeter(inputValue);

更新された例：

const inputElement: HTMLInputElement = document.getElementById('greet') as HTMLInputElement
const inputValue: string = inputElement.value

Typescriptlangのドキュメント：

TypeScript-基本タイプ-タイプアサーション

これをすばやく修正するには、[]を使用して属性を選択します。

function greet(elementId) {
    var inputValue = document.getElementById(elementId)["value"];
    if(inputValue.trim() == "") {
        inputValue = "World";
    }
    document.getElementById("greet").innerText = greeter(inputValue);
}

私はいくつかの方法を試してこの解決策を見つけましたが
、元のスクリプトの背後にある問題が何なのかわかりません。

参考として、Tomasz Nurkiewiczの投稿を参照してください。

問題はここにあります：

document.getElementById(elementId).value

入力要素のIDを渡しているため、実際には、HTMLElementからの戻り値getElementById()はHTMLInputElementそれからの継承のインスタンスであることがわかります。同様に、静的に型付けされたJavaでは、これはコンパイルされません。

public Object foo() {
  return 42;
}

foo().signum();

signum()Integerはのメソッドですが、コンパイラはの静的タイプfoo()、つまりしか認識しませんObject。そしてObject、signum()メソッドはありません。

しかし、コンパイラはそれを知ることができません。コードの動的な動作ではなく、静的な型にのみ基づくことができます。コンパイラが知る限り、式のタイプにdocument.getElementById(elementId)はvalueプロパティがありません。入力要素のみに値があります。

参照チェック用HTMLElementおよびHTMLInputElementMDN内。Typescriptは多かれ少なかれこれらと一致していると思います。

また、「DocgetId's」なしでPropsやRefsなどのプロパティを使用する場合は、次のことができます。

("" as HTMLInputElement).value;

逆引用符があなたの小道具の値である場合、例は次のようになります：

var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);

角度を使用している場合は、使用できます-

const element = document.getElementById('elemId') as HTMLInputElement;

私にとってこの作品：

let inputValue = (swal.getPopup().querySelector('#inputValue ')as HTMLInputElement).value

問題：

エラープロパティ 'text'はタイプ 'HTMLElement'に存在しません

解決策：typeScript では、document.getElementById()型を返すキャストする必要がありますHTMLElement< HTMLScriptElement >

したがって、typescript.jsで予想されるエラーを解決する次の方法でそれを行うことができます

Code: var content: string = ( < HTMLScriptElement > document.getElementById(contentId)).text;

それは私にとってはうまくいきました。あなたにもうまくいくことを願っています。