Simplemente quiero hacer esto con mi KeyboardEvent

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

Si bien Event.target es de tipo EventTarget, no hereda de Element. Así que tengo que lanzarlo así:

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

Esto probablemente se deba a que algunos navegadores no siguen los estándares, ¿verdad? ¿Cuál es la implementación independiente del navegador correcta en TypeScript?

PD: Estoy usando jQuery para capturar KeyboardEvent.

No hereda de Elementporque no todos los destinos de eventos son elementos.

De MDN :

El elemento, el documento y la ventana son los objetivos de eventos más comunes, pero otros objetos también pueden ser objetivos de eventos, por ejemplo, XMLHttpRequest, AudioNode, AudioContext y otros.

Incluso el KeyboardEventque está intentando usar puede ocurrir en un elemento DOM o en el objeto de la ventana (y teóricamente en otras cosas), por lo que no tendría sentido evt.targetdefinirlo como un Element.

Si es un evento en un elemento DOM, entonces diría que puede asumir con seguridad evt.target. es un Element. No creo que esto sea una cuestión de comportamiento entre navegadores. Simplemente esa EventTargetes una interfaz más abstracta que Element.

Más información: https://typescript.codeplex.com/discussions/432211

Usando mecanografiado, uso una interfaz personalizada que solo se aplica a mi función. Caso de uso de ejemplo.

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

En este caso, handleChange recibirá un objeto con un campo de destino que es de tipo HTMLInputElement.

Más adelante en mi código puedo usar

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

Un enfoque más limpio sería poner la interfaz en un archivo separado.

interface HandleNameChangeInterface {
  target: HTMLInputElement;
}

luego use la siguiente definición de función:

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

En mi caso de uso, se define expresamente que la única persona que llama para manejar el cambio es un tipo de elemento HTML de texto de entrada.

La respuesta de JLRishe es correcta, así que simplemente uso esto en mi controlador de eventos:

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

Texto mecanografiado 3.2.4

Para recuperar la propiedad, debe convertir el objetivo al tipo de datos apropiado:

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

¿Podría crear su propia interfaz genérica que se extienda Event. ¿Algo como esto?

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

Entonces puedes usarlo como:

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

Con mecanografiado podemos aprovechar los alias de tipo, así:

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 proporciona la respuesta correcta, pero esta sintaxis parece más legible y más agradable para mí:

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