web-dev-qa-db-ja.com

TypeScriptのEventTarget型にプロパティ 'value'は存在しません

したがって、次のコードはAngular 4にあり、なぜ期待どおりに機能しないのかわかりません。

これがハンドラーのスニペットです。

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = event.target.value; //this wont work
}

HTML要素：

<input type="text" class="form-control" (input)="onUpdatingServerName($event)">

コードは私にエラーを与えます：

プロパティ 'value'はタイプ 'EventTarget'に存在しません。

しかし、console.logに見られるように、その値はevent.targetに存在します。

javascriptangulartypescript
61
Ravy

ここにあるevent.targetはHTMLElementであり、これはすべてのHTML要素の親ですが、プロパティvalueを持つことは保証されていません。 TypeScriptはこれを検出し、エラーをスローします。 event.targetを適切なHTML要素にキャストして、HTMLInputElementプロパティを持つvalueであることを確認します。

(<HTMLInputElement>event.target).value

ドキュメント ごと：

$eventを入力します

上記の例は、$eventをany型としてキャストします。これにより、コードが簡単になります。イベントオブジェクトのプロパティを明らかにし、愚かな間違いを防ぐことができる型情報はありません。

[...]

$eventは特定のKeyboardEventになりました。 すべての要素にvalueプロパティがあるわけではないため、targetを入力要素にキャストします。

（エンファシス鉱山）

79
Li357

HTMLInputElementをイベントタイプのジェネリックとして渡すことも機能するはずです。

onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event);
  this.newserverName = event.target.value;
}
48
Mikael Lirbank

私に役立つ別の修正を次に示します。

(event.target as HTMLInputElement).value

これは、event.targetがHTMLInputElementであることをTSに知らせることでエラーを取り除くはずです。これは本質的にvalueを持っています。指定する前に、TSはeventのみがHTMLInputElementであることを知っていた可能性が高いため、TSによると、キー入力されたtargetはランダムにマップされた値であり、任意の値になります。

24
Matt S.

私は同様のTypeScriptエラーの解決策を探していました：

TypeScriptのEventTarget型にプロパティ 'dataset'が存在しません

Reactでクリックされたボタン要素のevent.target.datasetにアクセスしたかった：

<button
  onClick={onClickHandler}
  data-index="4"
  data-name="Foo Bar"
>
  Delete Candidate
</button>

TypeScriptを介してdatasetの値を「存在」させる方法は次のとおりです。

const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
  const { name, index } = (event.target as HTMLButtonElement).dataset
  console.log({ name, index })
  // do stuff with name and index…
}
6
Beau Smith