Saya hanya ingin melakukan ini dengan KeyboardEvent saya

var tag = evt.target.tagName.toLowerCase();

Meskipun Event.target berjenis EventTarget, Event.target tidak mewarisi dari Element. Jadi saya harus melakukan cast seperti ini:

var tag = (<Element>evt.target).tagName.toLowerCase();

Ini mungkin karena beberapa browser tidak mengikuti standar, bukan? Apa implementasi agnostik browser yang benar di TypeScript?

PS: Saya menggunakan jQuery untuk merekam KeyboardEvent.

Itu tidak diturunkan dari Elementkarena tidak semua target acara adalah elemen.

Dari MDN :

Elemen, dokumen, dan jendela adalah target acara yang paling umum, tetapi objek lain juga bisa menjadi target acara, misalnya XMLHttpRequest, AudioNode, AudioContext, dan lainnya.

Bahkan yang KeyboardEventAnda coba gunakan dapat terjadi pada elemen DOM atau pada objek jendela (dan secara teoritis pada hal-hal lain), jadi saat ini tidak masuk akal untuk evt.targetdidefinisikan sebagai file Element.

Jika ini adalah peristiwa pada elemen DOM, maka saya akan mengatakan bahwa Anda dapat berasumsi dengan aman evt.target. adalah sebuah Element. Saya tidak berpikir ini adalah masalah perilaku lintas-browser. Hanya itu EventTargetadalah antarmuka yang lebih abstrak daripada Element.

Bacaan lebih lanjut: https://typescript.codeplex.com/discussions/432211

Menggunakan skrip ketikan, saya menggunakan antarmuka khusus yang hanya berlaku untuk fungsi saya. Contoh kasus penggunaan.

  handleChange(event: { target: HTMLInputElement; }) {
    this.setState({ value: event.target.value });
  }

Dalam hal ini, handleChange akan menerima objek dengan bidang target berjenis HTMLInputElement.

Nanti di kode saya bisa saya gunakan

<input type='text' value={this.state.value} onChange={this.handleChange} />

Pendekatan yang lebih bersih adalah meletakkan antarmuka ke file terpisah.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

kemudian gunakan definisi fungsi berikut:

  handleChange(event: HandleNameChangeInterface) {
    this.setState({ value: event.target.value });
  }

Dalam usecase saya, secara tegas didefinisikan bahwa satu-satunya pemanggil untuk handleChange adalah tipe elemen HTML dari teks input.

Jawaban JLRishe benar, jadi saya cukup menggunakan ini di event handler saya:

if (event.target instanceof Element) { /*...*/ }

Ketikan 3.2.4

Untuk mengambil properti, Anda harus mentransmisikan target ke tipe data yang sesuai:

e => console.log((e.target as Element).id)

Bisakah Anda membuat antarmuka umum Anda sendiri yang meluas Event. Sesuatu seperti ini?

interface DOMEvent<T extends EventTarget> extends Event {
  target: T
}

Kemudian Anda bisa menggunakannya seperti:

handleChange(event: DOMEvent<HTMLInputElement>) {
  this.setState({ value: event.target.value });
}

Dengan skrip ketikan kita dapat memanfaatkan alias tipe, seperti:

type KeyboardEvent = {
  target: HTMLInputElement,
  key: string,
};
const onKeyPress = (e: KeyboardEvent) => {
  if ('Enter' === e.key) { // Enter keyboard was pressed!
    submit(e.target.value);
    e.target.value = '';
    return;
  }
  // continue handle onKeyPress input events...
};

@Bangonkali memberikan jawaban yang benar, tetapi sintaks ini tampaknya lebih mudah dibaca dan lebih baik bagi saya:

eventChange($event: KeyboardEvent): void {
    (<HTMLInputElement>$event.target).value;
}