Tôi chỉ muốn thực hiện điều này với KeyboardEvent của mình

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

Trong khi Event.target thuộc loại EventTarget, nó không kế thừa từ Element. Vì vậy, tôi phải cast nó như thế này:

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

Điều này có lẽ là do một số trình duyệt không tuân theo các tiêu chuẩn, phải không? Cách triển khai bất khả tri của trình duyệt trong TypeScript là gì?

Tái bút: Tôi đang sử dụng jQuery để nắm bắt được KeyboardEvent.

Nó không kế thừa từ Elementvì không phải tất cả các mục tiêu sự kiện đều là phần tử.

Từ MDN :

Phần tử, tài liệu và cửa sổ là các mục tiêu sự kiện phổ biến nhất, nhưng các đối tượng khác cũng có thể là mục tiêu sự kiện, ví dụ: XMLHttpRequest, AudioNode, AudioContext và các đối tượng khác.

Ngay cả khi KeyboardEventbạn đang cố gắng sử dụng có thể xảy ra trên một phần tử DOM hoặc trên đối tượng cửa sổ (và về mặt lý thuyết trên những thứ khác), vì vậy ngay tại đó, nó sẽ không hợp lý evt.targetkhi được định nghĩa là một Element.

Nếu đó là một sự kiện trên phần tử DOM, thì tôi sẽ nói rằng bạn có thể giả sử một cách an toàn evt.target. là một Element. Tôi không nghĩ đây là vấn đề của hành vi trên nhiều trình duyệt. Đó chỉ EventTargetlà một giao diện trừu tượng hơn Element.

Đọc thêm: https://typescript.codeplex.com/discussions/432211

Sử dụng bản đánh chữ, tôi sử dụng giao diện tùy chỉnh chỉ áp dụng cho chức năng của tôi. Ví dụ trường hợp sử dụng.

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

Trong trường hợp này, handleChange sẽ nhận một đối tượng có trường đích thuộc loại HTMLInputElement.

Sau này trong mã của tôi, tôi có thể sử dụng

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

Một cách tiếp cận rõ ràng hơn sẽ là đặt giao diện vào một tệp riêng biệt.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

sau đó sử dụng định nghĩa hàm sau:

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

Trong usecase của tôi, nó được định nghĩa rõ ràng rằng người gọi duy nhất để xử lý handleChange là một loại phần tử HTML của văn bản đầu vào.

Câu trả lời của JLRishe là đúng, vì vậy tôi chỉ cần sử dụng câu này trong trình xử lý sự kiện của mình:

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

Bản đánh giá 3.2.4

Để truy xuất thuộc tính, bạn phải truyền đích đến kiểu dữ liệu thích hợp:

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

Bạn có thể tạo giao diện chung của riêng mình mở rộng Event. Một cái gì đó như thế này?

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

Sau đó, bạn có thể sử dụng nó như:

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

Với typecript, chúng ta có thể tận dụng các bí danh kiểu, như sau:

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 cung cấp câu trả lời đúng, nhưng cú pháp này có vẻ dễ đọc hơn và đẹp hơn đối với tôi:

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