Property 'Value' Does Not Exist on Type Eventtarget in Typescript

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

event.target here is an HTMLElement which is the parent of all HTML elements, but isn't guaranteed to have the property value. TypeScript detects this and throws the error. Cast event.target to the appropriate HTML element to ensure it is HTMLInputElement which does have a value property:

(event.target as HTMLInputElement).value

Per the documentation:

Type the $event

The example above casts the $event as an any type. That simplifies the code at a cost. There is no type information that could reveal properties of the event object and prevent silly mistakes.

[...]

The $event is now a specific KeyboardEvent. Not all elements have a value property so it casts target to an input element.

(Emphasis mine)

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

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);
}

Property 'value' does not exist on type EventTarget (ts2339)

Since target could be any other potential element (or even a non-element) you can use a Type Assertion to make it into HTMLButtonElement.

const hClick = (e:React.MouseEvent<HTMLButtonElement>)=>{
    let button = e.target as HTMLButtonElement;
    console.log(button.value)
}

I look on the React Typings and the HTMLButtonElement will end up in currentTarget (which makes sense because that's the element the listener is attached to which is a button).

So you can just use:

const hClick = (e:React.MouseEvent<HTMLButtonElement>)=>{
    console.log(e.currentTarget.value)
}

Property 'value' does not exist on type 'EventTarget'.ts(2339) - TypeScript

Looking at the error reported:
Property 'value' does not exist on type 'EventTarget'

Since you are using a custom component <Slider>, you need to explicitly tell TypeScript the type of the HTMLElement which is your target.

Look at this for more details

Property 'name' does not exist on type 'EventTarget' - React + TypeScript

event.target is the element from which element is dispatched, which necessarily doesn't have to be the HTMLButtonElement defined in the event.

However, if you use event.currentTarget, you will see that this error goes away:

const { name } = event.currentTarget;

If you have to use event.target itself, you would have to cast the object:

const { name } = event.target as HTMLButtonElement;

From the typings:

/**
  * currentTarget - a reference to the element on which the event listener is registered.
  *
  * target - a reference to the element from which the event was originally dispatched.
  * This might be a child element to the element on which the event listener is registered.
  * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
*/

Property 'innerText' does not exist on type 'EventTarget' --TypeScript

You could type cast event target to HTMLElement and access innerText over it

<Grid onMouseEnter={(e) => setMegaMenu((e.target as HTMLElement).innerText)} />

Angular 12. error TS2339: Property 'value' does not exist on type 'EventTarget'

Why you don't just put:

HTML:

 <select class="form-control" [(ngModel)]="productsPerPage">
        <option value="3">3 per Page</option>
        <option value="4">4 per Page</option>
        <option value="6">6 per Page</option>
        <option value="8">8 per Page</option>
    </select>

NOTE: You have to import NgModule in your module.

For instance, in your app.module.ts:

...
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
...

imports: [
...
    FormsModule,
...
]

Typescript complains about e: EventTarget not having value property in onChange function if I pass it as forwarded prop through wrapper component

Props of SelectField has & FormControlProps which has its own onChange type, so the final onChange becomes a union type.

You can omit the unnecessary onChange using Omit<FormControlProps, "onChange">

Typescript - Solid.js select onchange event: Property 'value' does not exist on type 'EventTarget'

The event handler should look like this:

<select
  name="cellsWide"
  onChange={(e) => {
    console.log(e.currentTarget.value);
  }}
>

The difference between target and currentTarget is explained on MDN here. target is the element that triggered the event, currentTarget is the element the handler is on. This means that strictly speaking, target might not be the element you defined the handler on, it might not even be an HTMLElement. Using currentTarget is therefore the safe alternative.

---

Related Topics