Po prostu chcę to zrobić za pomocą mojego KeyboardEvent

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

Chociaż Event.target jest typu EventTarget, nie dziedziczy po Element. Więc muszę to rzucić w ten sposób:

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

Jest to prawdopodobnie spowodowane tym, że niektóre przeglądarki nie przestrzegają standardów, prawda? Jaka jest poprawna implementacja agnostyczna przeglądarki w języku TypeScript?

PS: używam jQuery do przechwytywania zdarzenia KeyboardEvent.

Nie dziedziczy po, Elementponieważ nie wszystkie cele zdarzenia są elementami.

Z MDN :

Element, dokument i okno są najczęstszymi celami zdarzeń, ale inne obiekty mogą być również celami zdarzeń, na przykład XMLHttpRequest, AudioNode, AudioContext i inne.

Nawet ten KeyboardEvent, którego próbujesz użyć, może wystąpić na elemencie DOM lub obiekcie okna (i teoretycznie na innych rzeczach), więc tutaj nie miałoby sensu evt.targetdefiniowanie go jako Element.

Jeśli jest to zdarzenie na elemencie DOM, to powiedziałbym, że można spokojnie założyć evt.target. jest Element. Nie sądzę, że jest to kwestia zachowania różnych przeglądarek. Po prostu EventTargetjest to bardziej abstrakcyjny interfejs niż Element.

Więcej informacji: https://typescript.codeplex.com/discussions/432211

Używając maszynopisu, używam niestandardowego interfejsu, który ma zastosowanie tylko do mojej funkcji. Przykład użycia.

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

W tym przypadku handleChange otrzyma obiekt z polem docelowym typu HTMLInputElement.

Później w moim kodzie mogę użyć

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

Czystszym podejściem byłoby umieszczenie interfejsu w osobnym pliku.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

następnie użyj następującej definicji funkcji:

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

W moim przypadku jest wyraźnie zdefiniowane, że jedynym elementem wywołującym do handleChange jest typ elementu HTML wejściowego tekstu.

Odpowiedź JLRishe jest poprawna, więc po prostu używam tego w moim module obsługi zdarzeń:

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

Maszynopis 3.2.4

Aby pobrać właściwość, należy rzutować cel na odpowiedni typ danych:

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

Czy mógłbyś stworzyć własny interfejs, który rozszerza Event. Coś takiego?

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

Następnie możesz go używać tak:

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

Za pomocą maszynopisu możemy wykorzystać aliasy typów, takie jak:

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 udzieli poprawnej odpowiedzi, ale ta składnia wydaje mi się bardziej czytelna i po prostu ładniejsza:

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