Property value does not exist on type EventTarget in TypeScript

Question

So the following code is in Angular 4 and I can t figure out why it doesn t work the way as expected   Here is a snippet of my handler   onUpdatingServerName event  Event      console log event     this newserverName   event target value    this wont work     HTML element    lt input type  text  class  form-control   input   onUpdatingServerName  event   gt    The code gives me the error      Property  value  does not exist on type  EventTarget     But as it can be seen in the console log that value does exist on the event target

User · Answer

I was looking for a solution to a similar TypeScript error with React:

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

I wanted to get to event.target.dataset of a clicked button element in React:

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

Here is how I was able to get the dataset value to "exist" via 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…
}

User · Answer

You should use event target value prop with onChange handler if not you could see    index js 1437 Warning  Failed prop type  You provided a  value  prop to a form field without an  onChange  handler  This will render a read-only field  If the field should be mutable use  defaultValue   Otherwise  set either  onChange  or  readOnly     Or If you want to use other handler than onChange  use event currentTarget value

User · Answer

The way I do it is the following  better than type assertion imho   onFieldUpdate event    target  HTMLInputElement        this  emit  onFieldUpdate   event target value      This assumes you are only interested in the target property  which is the most common case  If you need to access the other properties of event  a more comprehensive solution involves using the  amp  type intersection operator  event  Event  amp    target  HTMLInputElement    This is a Vue js version but the concept applies to all frameworks  Obviously you can go more specific and instead of using a general HTMLInputElement you can use e g  HTMLTextAreaElement for textareas

User · Answer

Try code below    console log event  target   value   it works for me  -

User · Answer

you can also create your own interface as well      export interface UserEvent         target  HTMLInputElement                         onUpdatingServerName event  UserEvent

User · Answer

Here s another fix that works for me    event target as HTMLInputElement  value  That should get rid of the error by letting TS know that event target is an HTMLInputElement  which inherently has a value  Before specifying  TS likely only knew that event alone was an HTMLInputElement  thus according to TS the keyed-in target was some randomly mapped value that could be anything

User · Answer

add any type to event event  any  example  element  addEvenListener  mousemove    event  any    gt     CODE        what happens is that typescript adds event as Event type and for some reason it doesn t recognize some properties  Adding it of type any no longer exists this problem  this works for any document  Property

User · Answer

Passing HTMLInputElement as a generic to the event type should work too   onUpdatingServerName event  React ChangeEvent lt HTMLInputElement gt       console log event     this newserverName   event target value

User · Answer

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    lt HTMLInputElement gt event target  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

[javascript] Property 'value' does not exist on type EventTarget in TypeScript

Examples related to javascript

Examples related to angular

Examples related to typescript