How to get input value in TypeScript (ember)?-CodePudding

I am new to Ember, try to make simple todo app by my own after YT tutorial. However I have a problem when I try to access input value.

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

My function:

updateNewItemValue(event: InputEvent) {
    this.newItem = event!.target.value;
 }

Using it in template:

<input
    type='text'
    {{on 'input' this.updateNewItemValue}}
    value={{this.newItem}}
/>

Maybe am I using wrong type for event argument?

CodePudding user response：

in Typescript, it doesn't know what sort of element the event will be coming from. So what I like to do is assert that the element is correct.

This has the advantage of providing a clear message to developers when they mis-configure something.

Additionally, assert is removed in production builds.

import { assert } from '@ember/debug';

// ...

updateNewItemValue(event: Event) {
  assert(
    `Expected input event handler to be used an an 'input' element,`   
    ` instead received: ${event.target.tagName}.`,
    event.target instanceof HTMLInputElement
  );

  this.newItem = event.target.value;
}