TypeScript'te EventTarget türünde 'değer' özelliği mevcut değil

Bu yüzden aşağıdaki kod Angular 4'tedir ve neden beklendiği gibi çalışmadığını anlayamıyorum.

İşte işleyicimden bir pasaj:

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

HTML öğesi:

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

Kod bana şu hatayı veriyor:

"Değer" özelliği, "EventTarget" türünde mevcut değil.

Fakat görülebileceği gibi, console.logbu değer event.target.

event.targetburada, HTMLElementtüm HTML öğelerinin ebeveyni olan, ancak özelliğe sahip olduğu garanti edilmeyen bir değerdir value. TypeScript bunu algılar ve hatayı atar. Cast event.targetuygun HTML öğesine o olduğundan emin olmak için HTMLInputElementye sahiptir valueözelliğini:

(<HTMLInputElement>event.target).value

Başına belgeler :

Yaz $event

Yukarıdaki örnek $event, bir anytür olarak atar . Bu, kodu bir maliyetle basitleştirir. Olay nesnesinin özelliklerini ortaya çıkaran ve aptalca hataları önleyen hiçbir tür bilgisi yoktur.

[...]

Artık $eventözeldir KeyboardEvent. Tüm öğelerin bir valueözelliği olmadığından target, bir girdi öğesine yayınlar .

(Vurgu benim)

HTMLInputElement öğesinin genel olarak olay türüne aktarılması da işe yaramalıdır:

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

İşte benim için çalışan başka bir düzeltme:

(event.target as HTMLInputElement).value

Yani TS bildiren tarafından hata kurtulmak gerektiğini event.targetbir olduğunu HTMLInputElementdoğal olarak sahip olduğu, value. Belirtmeden önce, TS muhtemelen yalnızca eventtek başına bir değer olduğunu biliyordu HTMLInputElement, bu nedenle TS'ye göre, targetherhangi bir şey olabilen rastgele eşlenmiş bir değerdi.

React ile benzer bir TypeScript hatasına çözüm arıyordum:

TypeScript'te EventTarget türünde 'veri kümesi' özelliği mevcut değil

event.target.datasetReact'te tıklanan bir düğme öğesine ulaşmak istedim :

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

datasetTypeScript aracılığıyla "var olma" değerini şu şekilde elde ettim:

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

Bunu yapmamın yolu şudur (tip ispatı imho'dan daha iyi):

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

Bu, yalnızca targeten yaygın durum olan mülkle ilgilendiğinizi varsayar . Diğer özelliklerine erişmeniz gerekiyorsa event, daha kapsamlı bir çözüm, &tür kavşak operatörünü kullanmayı içerir :

event: Event & { target: HTMLInputElement }

Bu bir Vue.js sürümüdür ancak konsept tüm çerçeveler için geçerlidir. Açıkçası daha spesifik gidebilirsiniz ve bir general kullanmak yerine HTMLInputElementörneğin HTMLTextAreaElementmetin alanları için kullanabilirsiniz .

Eğer event.target.valuegöremiyorsan onChange işleyicisi ile prop kullanmalısın :

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`.

Veya onChange dışında başka bir işleyici kullanmak istiyorsanız, event.currentTarget.value

etkinliğe herhangi bir tür ekleyin

event: any

misal

addEvenListener('mousemove', (event: any) =>{
//CODE//
} )