349

私は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に非常に慣れていないので、明らかな何かが欠けている可能性があることに注意してください。:)

4

15 に答える 15

588

Tomasz Nurkiewiczsの回答に基づくと、「問題」は、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;

つまり、タイプ情報は含まれていません。

于 2012-10-20T15:58:38.753 に答える
123

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

let inputValue = (document.getElementById(elementId) as HTMLInputElement).value;
于 2017-05-06T18:06:20.427 に答える
47

私たちは 主張する ことができます

const inputElement: HTMLInputElement = document.getElementById('greet')

またはas-syntaxを使用

const inputElement = document.getElementById('greet') as HTMLInputElement

与える

const inputValue = inputElement.value // now inferred to be string
于 2018-09-25T09:50:04.923 に答える
45

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

var inputElement = <HTMLInputElement>document.getElementById('greet');
inputElement.value = greeter(inputValue);
于 2012-10-20T15:54:38.723 に答える
23

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

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

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

参考までに、TomaszNurkiewiczの投稿を参照してください。

于 2012-10-20T15:46:38.337 に答える
20

問題はここにあります：

document.getElementById(elementId).value

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

public Object foo() {
  return 42;
}

foo().signum();

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

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

身元調査HTMLElementとHTMLInputElementMDNで。Typescriptは多かれ少なかれこれらと一致していると思います。

于 2012-10-20T15:17:41.290 に答える
14

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

("" as HTMLInputElement).value;

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

var val = (this.refs.newText as HTMLInputElement).value;
alert("Saving this:" + val);
于 2018-01-09T09:26:12.553 に答える
14

まだこれに苦労しているかもしれない人のために、別の選択肢はを使用して(document.getElementById(elementId) as HTMLInputElement).value = ''います。ソース。

それでも問題が発生する場合は、次のような関数に抽出してみてください。

function myInput() {
   (document.getElementById(elementId) as HTMLInputElement).value = ''
}
于 2021-05-03T16:08:36.663 に答える
7

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

const element = document.getElementById('elemId') as HTMLInputElement;
于 2019-09-17T09:02:56.793 に答える
6

代わりにジェネリックスを使用することで、型アサーションなしでこれを実現する方法があります。ジェネリックスは、一般的に少し使いやすく安全です。

残念ながら、getElementById一般的ではありませんが、次のquerySelectorとおりです。

const inputValue = document.querySelector<HTMLInputElement>('#greet')!.value;

同様に、を使用querySelectorAllして複数の要素を選択し、ジェネリックを使用して、TSが選択されたすべての要素が特定のタイプであることを理解できるようにすることができます。

const inputs = document.querySelectorAll<HTMLInputElement>('.my-input');

これにより、が生成されNodeListOf<HTMLInputElement>ます。

于 2021-01-09T19:03:33.937 に答える
1

私のためのこの仕事：

let inputValue = (swal.getPopup().querySelector('#inputValue ')as HTMLInputElement).value
于 2019-11-04T18:40:18.367 に答える
1

私は同様の問題を抱えています（JSファイルのTS警告：「プロパティXはタイプXに存在しません」：よりクリーンなJavaScriptを記述できますか？）

タグはtypescriptファイルの警告を削除するのに役立ちましたが、コンパイル後もJavaScriptファイルに警告が表示されます。

では、クリーンで、.valueを操作できるコードを作成するにはどうすればよいですか？

かなり時間がかかりましたが、別の方法を使用して解決策を見つけました。

HTMLコード：

<form id="my-form" 
   action="index.html"
   method="get"
   onsubmit="return showValue();">
    <input type="text" name="username">
    <input type="text" name="full-name">
    <input type="password" name="password">
    <button type="button" onclick="showValue();">Show value</button>
</form>

Javascriptコード：

function showValue() {
    const myForm = document.forms.my-form;
    console.log(myForm?.username.value);
    return 1;
}

にはdocument.forms.xプロパティが"value"あり、typescriptファイルと結果のJavaScriptの両方で警告を削除します。

于 2021-10-12T10:03:39.680 に答える
0

動的な値を割り当てる必要がある動的な要素IDがある場合は、次を使用できます。

//element_id = you dynamic id.
//dynamic_val = you dynamic value.
let _el = document.getElementById(element_id);
_el.value = dynamic_val.toString();

これは私のために働きます。

于 2020-08-02T15:11:06.513 に答える
0

これは些細なことのように思えるかもしれませんが、これが私にとってうまくいったことです。

yarn add -D @types/web

古くなった型の定義があったに違いないと思います。

于 2021-09-24T21:10:29.967 に答える
-2

問題：

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

解決策：typeScriptでは、タイプを返すキャストが必要ですdocument.getElementById()。HTMLElement< HTMLScriptElement >

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

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

それは私のために働いた..それがあなたのためにも働くことを願っています。

于 2015-08-18T06:25:56.420 に答える