Eu simplesmente quero fazer isso com meu KeyboardEvent

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

Embora Event.target seja do tipo EventTarget, ele não herda de Element. Então eu tenho que lançar assim:

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

Isso provavelmente se deve a alguns navegadores que não seguem os padrões, certo? Qual é a implementação independente de navegador correta no TypeScript?

PS: Estou usando o jQuery para capturar o KeyboardEvent.

Não herda de Elementporque nem todos os destinos de evento são elementos.

Do MDN :

Elemento, documento e janela são os alvos de eventos mais comuns, mas outros objetos também podem ser alvos de eventos, por exemplo XMLHttpRequest, AudioNode, AudioContext e outros.

Até mesmo o que KeyboardEventvocê está tentando usar pode ocorrer em um elemento DOM ou no objeto de janela (e teoricamente em outras coisas), portanto, não faria sentido evt.targetser definido como um Element.

Se for um evento em um elemento DOM, eu diria que você pode assumir com segurança evt.target. é um Element. Não acho que seja uma questão de comportamento entre navegadores. Simplesmente essa EventTargeté uma interface mais abstrata do que Element.

Leitura adicional: https://typescript.codeplex.com/discussions/432211

Usando o typescript, eu uso uma interface personalizada que se aplica apenas à minha função. Exemplo de caso de uso.

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

Nesse caso, o handleChange receberá um objeto com campo de destino do tipo HTMLInputElement.

Posteriormente em meu código, posso usar

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

Uma abordagem mais limpa seria colocar a interface em um arquivo separado.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

em seguida, use a seguinte definição de função:

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

No meu caso de uso, está expressamente definido que o único chamador para handleChange é um tipo de elemento HTML de texto de entrada.

A resposta de JLRishe está correta, então eu simplesmente uso isso em meu manipulador de eventos:

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

Texto datilografado 3.2.4

Para recuperar a propriedade, você deve converter o destino para o tipo de dados apropriado:

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

Você poderia criar sua própria interface genérica que se estende Event. Algo assim?

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

Então você pode usá-lo como:

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

Com o texto digitado, podemos aproveitar aliases de tipo, como:

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 fornece a resposta certa, mas essa sintaxe parece mais legível e simplesmente mais agradável para mim:

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