Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Property 'value' does not exist on type 'EventTarget'

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);   } } 
like image 652
user584018 Avatar asked Feb 06 '17 11:02

user584018


People also ask

Does not exist on type EventTarget?

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.

How do you type events target value TypeScript?

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.

What is EventTarget?

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.

What is event target value in Javascript?

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.


1 Answers

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); } 
like image 142
smnbbrv Avatar answered Sep 24 '22 01:09

smnbbrv