typescriptvue.jsnuxt.js

What are types for input events in Vue

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?

Solution

  • 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)
}