What are types for input events in Vue

Question

What are correct Typescript types for input events in Vue? When I use Event it is missing target value or key or files properties.

Let's have an example for:

<input @input="(e: MISSING_TYPE) => {}" />
<input @keypress="(e: MISSING_TYPE) => {}" />

In React we have something like ChangeEvent which is generic and apply element specific types. How we do it in Vue?

Is KeyboardEvent what you're looking for? (Event > UIEvent > KeyboardEvent) — steve16351, Aug 28 '20 at 09:34
Thank you, KeyboardEvent looks good for keypress. What about input and e.target.value? Can we have any documentation on the list of these specific events like KeyboardEvent or we need to extract it from codebase? — Patryk Gułaś, Aug 28 '20 at 09:36
`target` is on the `Event` type. I think you'd need to cast to something more specific to get value, i.e. (e.target).value — steve16351, Aug 28 '20 at 09:39
For docs, you have [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent), the TypeScript types should correspond to this. You can inspect them yourself in [lib.dom.d.ts](https://github.com/microsoft/TypeScript/blob/master/lib/lib.dom.d.ts) — steve16351, Aug 28 '20 at 09:52

score 20 · Accepted Answer · answered Aug 28 '20 at 09:49

20

Thanks to @steve16351 answer in the comments, there is summary:

For keyboard event like keypress you can use more specific event from Event -> UIEvent -> KeyboardEvent:

<input @keypress="handleKeypress" />

handleKeypress(e: KeyboardEvent) { }

For more specific event like input change on HTMLInputElement you need to cast it:

<input @input="handleInput" />

handleInput(e: Event) { 
  const target = (<HTMLInputElement>e.target)

  console.log(target.value)
}

answered Aug 28 '20 at 09:49

Patryk Gułaś

8

this works for me, though I had to cast the target as: `const target = e.target as HTMLInputElement` – fredrivett Nov 16 '20 at 13:33

Karl Adler · Answer 2 · 2023-06-27T07:09:59.267

0

This works for me having a common text input, whilst the accepted answer produces a linter error for me:

Error: Unexpected token. Did you mean `{'}'}` or `}`?

const onInput = (ev: Event) => {
  const { value = '' } = ev.target as HTMLInputElement;
  // ...
};

edited Jun 27 '23 at 07:09

answered Jun 27 '23 at 06:59

Karl Adler

2 Answers2