javascript - tutorial - install angular 2

La propiedad ''valor'' no existe en el tipo EventTarget en TypeScript

Question

Entonces, el siguiente código está en Angular 4 y no puedo entender por qué no funciona como se esperaba.

Aquí hay un fragmento de mi controlador:

onUpdatingServerName(event: Event) {
  console.log(event);
  this.newserverName = event.target.value; //this wont work
}

Elemento HTML:

<input type="text" class="form-control" (input)="onUpdatingServerName($event)">

El código me da el error:

La propiedad ''valor'' no existe en el tipo ''EventTarget''.

Pero como se puede ver en console.log ese valor existe en event.target .

Answer 1

Aquí hay otra solución que me funciona:

(event.target as HTMLInputElement).value

Eso debería eliminar el error al event.target TS que event.target es un HTMLInputElement , que tiene un value inherente. Antes de especificar, TS probablemente solo sabía que ese event solo era un HTMLInputElement , por lo tanto, según TS, el target ingresado era un valor asignado al azar que podría ser cualquier cosa.

Answer 2

Estaba buscando una solución a un error similar de TypeScript:

La propiedad ''conjunto de datos'' no existe en el tipo EventTarget en TypeScript

Quería llegar a event.target.dataset de un elemento de botón en React:

<button
  onClick={onClickHandler}
  data-index="4"
  data-name="Foo Bar"
>
  Delete Candidate
</button>

Así es como pude hacer que el valor del dataset "existiera" a través de TypeScript:

const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {
  const { name, index } = (event.target as HTMLButtonElement).dataset
  console.log({ name, index })
  // do stuff with name and index…
}

Answer 3

Pasar HTMLInputElement como genérico al tipo de evento también debería funcionar:

onUpdatingServerName(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event);
  this.newserverName = event.target.value;
}

Answer 4

event.target aquí es un elemento HTMLElement que es el padre de todos los elementos HTML, pero no se garantiza que tenga el value la propiedad. TypeScript detecta esto y arroja el error. Transmita event.target al elemento HTML adecuado para asegurarse de que sea HTMLInputElement que tenga una propiedad de value :

(<HTMLInputElement>event.target).value

Por la documentación :

Escriba el $event

El ejemplo anterior convierte el $event como any tipo. Eso simplifica el código a un costo. No hay información de tipo que pueda revelar propiedades del objeto de evento y evitar errores tontos.

[...]

El $event ahora es un $event KeyboardEvent específico. No todos los elementos tienen una propiedad de value , por lo que convierte el target en un elemento de entrada.

(El énfasis es mío)