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)">

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

プロパティ「値」はタイプ「EventTarget」に存在しません。

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

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

(<HTMLInputElement>event.target).value

ドキュメントごと：

入力します $event

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

[...]

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

（エンファシス鉱山）

HTMLInputElementをジェネリックとしてイベントタイプに渡すこともできます。

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

ここで私のために働く別の修正があります：

(event.target as HTMLInputElement).value

これは、TSは、それは知っているさせることでエラーを取り除く必要がありますevent.targetされHTMLInputElement、本質的に持っています、value。指定する前に、TSは、おそらく唯一のことは知っていたevent人だったHTMLInputElementので、TSによると、キー入力されたtargetものかもしれない、いくつかのランダムなマッピング値でした。

Reactでの同様のTypeScriptエラーの解決策を探していました。

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

event.target.datasetReactでクリックされたボタン要素を取得したいと思いました。

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

datasetTypeScriptを使用して値を「存在」させる方法は次のとおりです。

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

event.target.value見えない場合は、onChangeハンドラでpropを使用する必要があります。

index.js:1437 Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

または、onChange以外のハンドラを使用する場合は、 event.currentTarget.value

私が行う方法は次のとおりです（タイプアサーションimhoより優れています）。

onFieldUpdate(event: { target: HTMLInputElement }) {
  this.$emit('onFieldUpdate', event.target.value);
}

これtargetは、最も一般的なケースであるプロパティのみに関心があることを前提としています。の他のプロパティにアクセスする必要がある場合event、より包括的なソリューションには、&タイプ交差演算子の使用が含まれます。

event: Event & { target: HTMLInputElement }

これはVue.jsバージョンですが、コンセプトはすべてのフレームワークに適用されます。明らかに、より具体的にHTMLInputElementすることができ、一般的なものを使用する代わりに、たとえばHTMLTextAreaElementテキストエリアに使用できます。