Property value does not exist on type EventTarget

Question

I am using TypeScript Version 2 for an Angular 2 component code  I am getting error  quot Property  value  does not exist on type  EventTarget  quot  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         lt textarea  keyup   quot emitWordCount  event  quot  gt  lt  textarea gt         export class TextEditorComponent      Output   countUpdate   new EventEmitter lt number gt        emitWordCount e  Event        this countUpdate emit               e target value match   S  g         length

User · Answer

fromEvent lt KeyboardEvent gt  document querySelector   searcha   as HTMLInputElement    keyup        pipe        debounceTime 500         distinctUntilChanged          map e    gt                return e target  value        lt -- target does not exist on                     subscribe k   gt  console log k      Maybe something like the above could help  Change it based on the real code  The issue is          target  value

User · Answer

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   lt HTMLTextAreaElement gt 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 lt T extends HTMLElement gt    Event  amp      target  T        probably you might want to add the currentTarget as well      currentTarget  T        use it instead of Event let e  HTMLElementEvent lt HTMLTextAreaElement gt    console log e target value       or in the context of the given example emitWordCount e  HTMLElementEvent lt HTMLTextAreaElement gt       this countUpdate emit e target value

User · Answer

consider  any    lt textarea  keyup   quot emitWordCount  any  event   quot  gt  lt  textarea gt

User · Answer

Since I reached two questions searching for my problem in a slightly different way  I am replicating my answer in case you end up here  In the called function  you can define your type with  emitWordCount event    target  HTMLInputElement        this countUpdate emit 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    You can also go more specific and instead of using HTMLInputElement you can use e g  HTMLTextAreaElement for textareas

User · Answer

Here is one more way to specify event target    x000D   x000D  import   Component  EventEmitter  Output   from   angular core   x000D   x000D   Component   x000D      selector   text-editor   x000D      template    lt textarea  keyup   emitWordCount  event   gt  lt  textarea gt   x000D     x000D  export class TextEditorComponent   x000D   x000D      Output   countUpdate   new EventEmitter lt number gt     x000D   x000D      emitWordCount   target      as HTMLTextAreaElement          lt - right there x000D   x000D          this countUpdate emit  x000D               using it directly without  event  x000D               target value match   S  g         length   x000D        x000D    x000D   x000D   x000D

User · Answer

I believe it must work but any ways I m not able to identify   Other approach can be    lt textarea  keyup   emitWordCount myModel     ngModel    myModel  gt  lt  textarea gt    export class TextEditorComponent       Output   countUpdate   new EventEmitter lt number gt         emitWordCount model           this countUpdate emit            model match   S  g         length

User · Answer

Here is the simple approach I used   const element   event currentTarget as HTMLInputElement const value   element value   The error shown by TypeScript compiler is gone and the code works

User · Answer

Use currentValue instead  as the type of currentValue is EventTarget  amp  HTMLInputElement

User · Answer

Best way is to use templating   gt  add id to your input and then use it value  lt input type  quot text quot   notaryLockup  keyup     quot searchNotary notaryLockup value  quot placeholder  quot Entrez des information quot   gt  searchNotary value  string        your logic    this way you will never have Typescript error when strict verification is activated   gt  See angular Docs

User · Answer

Here is another simple approach  I used        inputChange event  KeyboardEvent              const target   event target as HTMLTextAreaElement      var activeInput   target id

User · Answer

In my case  I had  const handleOnChange    e  ChangeEvent    gt      doSomething e target value      And the issue was that I did not provide a type argument to ChangeEvent so that it knows e target was an HTMLInputElement  Even if I manually told it that target was an input element  e g  const target  HTMLInputElement   e target   the ChangeEvent still didn t know that made sense  The solution was to do     add type argument const handleOnChange    e  ChangeEvent lt HTMLInputElement gt     gt      doSomething e target value

User · Answer

Angular 10  Open tsconfig json and disable strictDomEventTypes     quot angularCompilerOptions quot                                quot strictDomEventTypes quot   false

[angular] Property 'value' does not exist on type 'EventTarget'

Examples related to angular

Examples related to typescript

Examples related to properties