typescript - property - ¿Por qué Event.target no es Element en Typecript?

property ''result'' does not exist on type ''eventtarget''

Question

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. Entonces 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 agnóstica del navegador correcta en TypeScript?

PD: Estoy usando jQuery para capturar el KeyboardEvent.

Answer 1

Mecanografiado 3.2.4

Para recuperar la propiedad, debe convertir el destino en el tipo de datos apropiado:

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

Answer 2

Con el mecanografiado, uso una interfaz personalizada que solo se aplica a mi función. Ejemplo de caso de uso.

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

En este caso, handleChange recibirá un objeto con un campo de destino del 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 colocar 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 a handleChange es un tipo de elemento HTML de texto de entrada.

Answer 3

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

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

Answer 4

No hereda de Element porque no todos los objetivos de eventos son elementos.

De MDN :

Elemento, documento y ventana son los destinos de eventos más comunes, pero otros objetos también pueden ser destinos de eventos, por ejemplo XMLHttpRequest, AudioNode, AudioContext y otros.

Incluso el KeyboardEvent que 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 allí no tendría sentido que evt.target se defina 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 que EventTarget es una interfaz más abstracta que Element .

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

Answer 5

Simplemente use e.currentTarget lugar de e.target y ya se escribirá correctamente