Solución:
Debe indicar explícitamente a TypeScript el tipo de HTMLElement que es su objetivo.
La forma de hacerlo es usar un tipo genérico para convertirlo en un tipo adecuado:
this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*...*/)
o (como quieras)
this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*...*/)
o (de nuevo, cuestión de preferencia)
const target = e.target as HTMLTextAreaElement;
this.countUpdate.emit(target.value./*...*/)
Esto le permitirá a TypeScript saber que el elemento es un textarea y sabrá del valor de la propiedad.
Lo mismo se puede hacer con cualquier tipo de elemento HTML, siempre que le brinde a TypeScript un poco más de información sobre sus tipos, se lo devolverá con las sugerencias adecuadas y, por supuesto, con menos errores.
Para que sea más fácil para el futuro, es posible que desee definir directamente un evento con el tipo de su objetivo:
// create a new type HTMLElementEvent that has a target of type you pass
// type T must be a HTMLElement (e.g. HTMLTextAreaElement extends HTMLElement)
type HTMLElementEvent<T extends HTMLElement> = Event & {
target: T;
// probably you might want to add the currentTarget as well
// currentTarget: T;
}
// use it instead of Event
let e: HTMLElementEvent<HTMLTextAreaElement>;
console.log(e.target.value);
// or in the context of the given example
emitWordCount(e: HTMLElementEvent<HTMLTextAreaElement>) {
this.countUpdate.emit(e.target.value);
}
Aquí está el enfoque simple que utilicé:
const element = event.currentTarget as HTMLInputElement
const value = element.value
El error mostrado por el compilador de TypeScript desapareció y el código funciona.
Como llegué a dos preguntas buscando mi problema de una manera ligeramente diferente, estoy replicando mi respuesta en caso de que termines aquí.
En la función llamada, puede definir su tipo con:
emitWordCount(event: { target: HTMLInputElement }) {
this.countUpdate.emit(event.target.value);
}
Esto supone que solo le interesan los target propiedad, que es el caso más común. Si necesita acceder a las otras propiedades de event, una solución más completa implica el uso de & tipo operador de intersección:
event: Event & { target: HTMLInputElement }
También puede ser más específico y en lugar de usar HTMLInputElement puedes usar, por ejemplo, HTMLTextAreaElement para áreas de texto.