ฉันแค่ต้องการทำสิ่งนี้กับ KeyboardEvent ของฉัน

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

ในขณะที่ Event.target เป็นประเภท EventTarget แต่จะไม่สืบทอดมาจาก Element ดังนั้นฉันต้องหล่อแบบนี้:

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

อาจเป็นเพราะเบราว์เซอร์บางตัวไม่เป็นไปตามมาตรฐานใช่ไหม? อะไรคือการใช้งานเบราว์เซอร์ที่ไม่เชื่อเรื่องพระเจ้าใน TypeScript

PS: ฉันใช้ jQuery เพื่อจับ KeyboardEvent

มันไม่ได้รับมรดกจาก Elementเนื่องจากเป้าหมายเหตุการณ์ไม่ใช่องค์ประกอบทั้งหมด

จาก MDN :

องค์ประกอบเอกสารและหน้าต่างเป็นเป้าหมายเหตุการณ์ที่พบบ่อยที่สุด แต่วัตถุอื่น ๆ ก็สามารถเป็นเป้าหมายเหตุการณ์ได้เช่นกันตัวอย่างเช่น XMLHttpRequest, AudioNode, AudioContext และอื่น ๆ

แม้แต่สิ่งที่KeyboardEventคุณพยายามใช้ก็สามารถเกิดขึ้นได้ในองค์ประกอบ DOM หรือบนวัตถุหน้าต่าง (และในทางทฤษฎีกับสิ่งอื่น ๆ ) ดังนั้นจึงไม่สมเหตุสมผลevt.targetที่จะกำหนดเป็นElementไฟล์.

ถ้ามันเป็นเหตุการณ์ในองค์ประกอบ DOM evt.targetแล้วฉันจะบอกว่าคุณได้อย่างปลอดภัยสามารถสันนิษฐานได้ว่า คือElement. ฉันไม่คิดว่านี่เป็นเรื่องของพฤติกรรมข้ามเบราว์เซอร์ เพียงแค่ว่าเป็นอินเตอร์เฟซที่เป็นนามธรรมมากกว่าEventTargetElement

อ่านเพิ่มเติม: https://typescript.codeplex.com/discussions/432211

การใช้ typescript ฉันใช้อินเทอร์เฟซแบบกำหนดเองที่ใช้กับฟังก์ชันของฉันเท่านั้น ตัวอย่างการใช้งาน

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

ในกรณีนี้ handleChange จะได้รับวัตถุที่มีฟิลด์เป้าหมายซึ่งเป็นประเภท HTMLInputElement

ต่อมาในรหัสของฉันฉันสามารถใช้ได้

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

วิธีที่สะอาดกว่าคือการใส่อินเทอร์เฟซไปยังไฟล์แยกต่างหาก

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

จากนั้นใช้นิยามฟังก์ชันต่อไปนี้:

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

ใน usecase ของฉันมีการกำหนดไว้อย่างชัดเจนว่าผู้โทรเท่านั้นที่จะ handleChange คือประเภทขององค์ประกอบ HTML ของข้อความอินพุต

คำตอบของ JLRishe ถูกต้องดังนั้นฉันจึงใช้สิ่งนี้ในตัวจัดการเหตุการณ์ของฉัน:

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

typescript 3.2.4

สำหรับการดึงคุณสมบัติคุณต้องส่งเป้าหมายไปยังประเภทข้อมูลที่เหมาะสม:

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

คุณสามารถสร้างอินเทอร์เฟซทั่วไปของคุณเองที่ขยายEventได้ อะไรทำนองนี้?

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

จากนั้นคุณสามารถใช้งานได้เช่น:

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

ด้วย typescript เราสามารถใช้ประโยชน์จากนามแฝงประเภทดังนี้:

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 ให้คำตอบที่ถูกต้อง แต่ไวยากรณ์นี้ดูเหมือนอ่านง่ายกว่าและดีกว่าสำหรับฉัน:

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