javascript - Properti 'value' tidak ada pada tipe EventTarget di TypeScript

Jadi kode berikut ini ada di Angular 4 dan saya tidak bisa mengerti kenapa itu tidak bekerja seperti yang diharapkan.

Berikut adalah cuplikan dari handler saya:

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

Elemen HTML:

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

Kode tersebut memberi saya kesalahan:

Properti 'value' tidak ada pada tipe 'EventTarget'.

Tapi seperti yang dapat dilihat di console.log bahwa nilai itu memang ada di event.target.

Jawaban #1

event.target di sini adalah sebuah HTMLElement yang merupakan induk dari semua elemen HTML, tetapi tidak dijamin memiliki properti value. TypeScript mendeteksi ini dan menimbulkan kesalahan. Konversi event.target ke elemen HTML yang sesuai untuk memastikan bahwa itu adalah HTMLInputElement yang memang memiliki properti value:

(event.target as HTMLInputElement).value

Menurut dokumentasi:

Ketik $event

Contoh di atas mengubah $event menjadi tipe any. Itu menyederhanakan kode dengan harga tertentu. Tidak ada informasi tipe yang dapat mengungkapkan properti objek event dan mencegah kesalahan yang konyol.

[...]

$event sekarang adalah KeyboardEvent tertentu. Tidak semua elemen memiliki properti value, jadi target diubah menjadi elemen input.

(Penekanan milik saya)

Jawaban #2

Meneruskan HTMLInputElement sebagai generic ke tipe event seharusnya juga berfungsi:

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

Jawaban #3

Berikut perbaikan lain yang berhasil untuk saya:

(event.target as HTMLInputElement).value

Itu seharusnya menghilangkan kesalahan dengan memberi tahu TS bahwa event.target adalah HTMLInputElement, yang secara inheren memiliki value. Sebelum ditentukan, kemungkinan TS hanya mengetahui bahwa event saja adalah HTMLInputElement, sehingga menurut TS target yang diketikkan adalah beberapa nilai yang dipetakan secara acak yang bisa berupa apa saja.

Jawaban #4

Saya sedang mencari solusi untuk kesalahan TypeScript serupa dengan React:

Properti 'dataset' tidak ada pada tipe EventTarget di TypeScript

Saya ingin mengakses event.target.dataset dari elemen tombol yang diklik di React:

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

Berikut adalah cara saya dapat membuat nilai dataset menjadi "exist" melalui TypeScript:

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

Jawaban #5

Di template -

`(keyup)="value2=$any($event.target).value"`

di komponen -

getInput(event: Event) {
  this.value1 = (event.target as HTMLInputElement).value;
}

Jawaban #6

Cara saya melakukannya adalah sebagai berikut (menurut saya lebih baik daripada penegasan tipe):

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

Ini mengasumsikan Anda hanya tertarik pada properti target, yang merupakan kasus paling umum. Jika Anda perlu mengakses properti lain dari event, solusi yang lebih komprehensif melibatkan penggunaan operator irisan tipe &:

event: Event & { target: HTMLInputElement }

Ini adalah versi Vue.js tetapi konsepnya berlaku untuk semua framework. Jelas, Anda bisa lebih spesifik dan alih-alih menggunakan HTMLInputElement secara umum, Anda bisa menggunakan misalnya HTMLTextAreaElement untuk area teks.

Jawaban #7

Ini bekerja untuk saya di Komponen HTML ANGULAR !!

$any($event.target).value

Tautan Sumber: https://www.tektutorialshub.com/angular/property-value-does-not-exist-on-type-eventtarget-error-in-angular/

Jawaban #8

Untuk menyelesaikan masalah ini, gunakan fungsi typecast $any ($any($event.target).value) untuk menghentikan pemeriksaan tipe di template.

Baca lebih lanjut di sini.

Artikel terkait