# How to get input value in TypeScript

**URL:** <https://discuss.emberjs.com/t/how-to-get-input-value-in-typescript/19533>\
**Category:** Questions\
**Created:** [May 10, 2022, 7:42am UTC](https://discuss.emberjs.com/t/how-to-get-input-value-in-typescript/19533 "2022-05-10T07:42:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![crazydev09](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/crazydev09/32/17793_2.png) [@crazydev09](https://discuss.emberjs.com/u/crazydev09)\
**Post date:** [May 10, 2022, 7:42am UTC](https://discuss.emberjs.com/t/how-to-get-input-value-in-typescript/19533/1 "2022-05-10T07:42:49Z")

</div>

Hi guys, 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:

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

```

Using it in template:

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

```

Maybe am I using wrong type for **event** argument?

---

<div class="post-metadata">

**Author:** ![chriskrycho](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/chriskrycho/32/17763_2.png) [@chriskrycho](https://discuss.emberjs.com/u/chriskrycho)\
**Post date:** [May 10, 2022, 12:49pm UTC](https://discuss.emberjs.com/t/how-to-get-input-value-in-typescript/19533/2 "2022-05-10T12:49:05Z")

</div>

👋 welcome, @crazydev09!

This is an annoying subtlety about how the underlying runtime behavior works, which TypeScript is faithfully representing. An `Event.target`, including `InputEvent.target`, can be `null`. The reason is that you can _construct_ those events yourself:

```javascript
let myInputEvent = new InputEvent('input');
// no `target` here! 😱

```

In this case, you can see from _inspecting_ the code that it is in fact wired up via a modifier in a way that means it will always have a target set, but that isn’t something TS can currently understand. Theoretically, it might be possible for TS to improve that in the future, but for today, that’s just a given.

In general, I deal with this by using [the `assert` function](https://api.emberjs.com/ember/4.3/functions/@ember%2Fdebug/assert) from `@ember/debug`. These assertions will be stripped out of production builds, but allow you to check for this kind of safety in development and testing, and in a type-safe way using TypeScript [assertion functions](https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/#assertion-functions). (See below for a discussion of assertion functions.) Here’s how that might look:

```javascript
import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { assert } from '@ember/debug';

export default class Example extends Component {
  @tracked newItem: string | undefined;

  @action
  updateNewItemValue(event: InputEvent) {
    assert(
      'updateNewItemValue must be bound to an input element',
      event.target instanceof HTMLInputElement
    );

    this.newItem = event.target.value;
  }
}

```

You can see in [this TS playground](https://www.typescriptlang.org/play?ssl=1&ssc=1&pln=3&pc=1#code/PTAEEkHMDsHsCcCmoAuALRBnRBuVGBPAciVACsBXTFUDUlWUAWwEMBrZdZAAwAFEmAI0TxuoAJZMADghSZQAdwRtQAYwRJVKADYEAUCFC85AWnEwEiPZJnwaRYwSlZgA4fAD6H2ILKItRDgGYMaYZhZI1tKyoA4oTi5uIl4AJoiCFJCBelG2NADCsNHQiNA0AGbwRbG8kNqSTCLA6sWlKNk2MQDeqPAsqhwpoAC+oJXVDnUNTSh9A+LQWUGddqA9-SjisNAjY1VMNUnwwD5+AcvRq+uY2Kuj4wcOR8BpGUs5iAAeeaBp5SwUbQ0VTaFg3UAAUU+LGk2mQXxQpRS8kKrTKaz0oCMs36g1AJQU4ERTAAXKBqPAFpBQAAfUAUaB-BaIFJBTFGDZbaDsihSFIsREAOUQhOJADUWNoKIgABSIABubTJ4GgUgoKAhirKAEoMVisWDbigZez9bFefyhSKiQIJVLkEwqDRhKBBLAGUMGKAWDsFmqaIg4Y0ykQADSm-UKtoAOhQLHgkEQNAW1B9qkQsHKoAAEgAVACyABkVf6IUG2hHtWyzehxJhowSbQcALygKNlWPxxMoaPyyXSoJY4Z6YdAA) that this type checks!

If you’re unfamiliar, `asserts` functions use TypeScript’s [assertion functions](https://devblogs.microsoft.com/typescript/announcing-typescript-3-7/#assertion-functions) to tell the compiler that control flow _stops_ at that point unless the condition is met. Or, to flip it around: it tells TypeScript it can _know_ the condition is true if the assertion passes. You can implement your own—for example, if you want to leave the assertions present in production for cases where a good error message is really important for debugging:

```javascript
export function assert(message: string, predicate: unknown): asserts predicate {
  if (!predicate) {
    throw new Error(message);
  }
}

```

---

<div class="post-metadata">

**Author:** ![crazydev09](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/crazydev09/32/17793_2.png) [@crazydev09](https://discuss.emberjs.com/u/crazydev09)\
**Post date:** [May 11, 2022, 7:13am UTC](https://discuss.emberjs.com/t/how-to-get-input-value-in-typescript/19533/3 "2022-05-11T07:13:07Z")

</div>

thank you very much, it works now