I am using TypeScript Version 2 for an Angular 2 component code.
I am getting error "Property 'value' does not exist on type 'EventTarget'" for below code, what could be the solution. Thanks!
e.target.value.match(/\S+/g) || []).length
import { Component, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'text-editor', template: ` <textarea (keyup)="emitWordCount($event)"></textarea> ` }) export class TextEditorComponent { @Output() countUpdate = new EventEmitter<number>(); emitWordCount(e: Event) { this.countUpdate.emit( (e.target.value.match(/\S+/g) || []).length); } }
The error "Property 'value' does not exist on type 'EventTarget'" occurs when we try to access the value property on an element that has a type of EventTarget . To solve the error, use a type assertion to type the element correctly before accessing the property. This is the index.
Use a type assertion to type event. target in TypeScript, e.g. const target = event. target as HTMLInputElement . Once typed correctly, you can access any element-specific properties on the target variable.
The EventTarget interface is implemented by objects that can receive events and may have listeners for them. In other words, any target of events implements the three methods associated with this interface.
The target event property returns the element that triggered the event. The target property gets the element on which the event originally occurred, opposed to the currentTarget property, which always refers to the element whose event listener triggered the event.
You need to explicitly tell TypeScript the type of the HTMLElement which is your target.
The way to do it is using a generic type to cast it to a proper type:
this.countUpdate.emit((<HTMLTextAreaElement>e.target).value./*...*/)
or (as you like)
this.countUpdate.emit((e.target as HTMLTextAreaElement).value./*...*/)
or (again, matter of preference)
const target = e.target as HTMLTextAreaElement; this.countUpdate.emit(target.value./*...*/)
This will let TypeScript know that the element is a textarea
and it will know of the value property.
The same could be done with any kind of HTML element, whenever you give TypeScript a bit more information about their types it pays you back with proper hints and of course less errors.
To make it easier for the future you might want to directly define an event with the type of its target:
// 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); }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With