Dlaczego Event.target nie jest elementem w maszynopisie?

Question

ja po prostu chcę to zrobić z moim KeyboardEvent

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

Podczas Event.target jest typu eventtarget nie dziedziczą z elementu. Więc mam do oddania go tak:

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

Jest to prawdopodobnie ze względu na niektórych przeglądarkach nie następujących standardów, prawda? Jaka jest poprawna implementacja agnostyczna przeglądarki w TypeScript?

PS: Używam jQuery do przechwytywania KeyboardEvent.

Answer 1

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

From MDN:

Element, dokument, a okna są najczęstsze cele zdarzeń, ale inne obiekty mogą być celami zdarzeń też, na przykład XMLHttpRequest, AudioNode, AudioContext i innych.

Nawet KeyboardEvent próbujesz użyć może występować na elemencie DOM lub obiektu window (i teoretycznie na inne rzeczy), więc tam nie ma sensu dla evt.target być zdefiniowane jako Element.

Jeśli jest to wydarzenie na elemencie DOM, to powiedziałbym, że można bezpiecznie założyć evt.target. jest Element. Nie sądzę, że jest to kwestia zachowania w różnych przeglądarkach. Tylko, że EventTarget jest bardziej abstrakcyjnym interfejsem niż Element.

Dalsze czytanie: https://typescript.codeplex.com/discussions/432211

Answer 2

Korzystanie maszynopis, używam interfejsu niestandardowego, które odnoszą się tylko do mojej funkcji. Przykład użycia.

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

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

Później w moim kodu można użyć

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

Czystsze rozwiązaniem byłoby umieścić interfejs do osobnego pliku.

interface HandleNameChangeInterface { 
    target: HTMLInputElement; 
} 

potem wykorzystać następującą definicję funkcję:

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

W moim usecase, to wyraźnie określono, że tylko dzwoniący do handleChange jest typ elementu HTML tekstu wejściowego.