Typing an input's keyup in react TypeScript

Question

I am trying to put my keyup event with TS but using any|KeyboardEvent does not work.

How to type events in React?

TS Error

Type '(e: KeyboardEvent) => void' is not assignable to type 'KeyboardEventHandler<HTMLInputElement>'.
  Types of parameters 'e' and 'event' are incompatible.
    Type 'KeyboardEvent<HTMLInputElement>' is missing the following properties from type 'KeyboardEvent': char, isComposing, DOM_KEY_LOCATION_LEFT, DOM_KEY_LOCATION_NUMPAD, and 15 more.  TS2322

Component

<input
  type="text"
  placeholder="Search for claim ID"
  onKeyUp={(e: KeyboardEvent) => {
    console.info();
  }}
/>

I'm not particularly well verse in React, but it looks like you're setting onKeyUp, which is a Keyboard Event, to an empty object. Surely instead, onKeyUp="console.info($event)" would work? — cmprogram, Jul 05 '21 at 12:53
@cmprogram what empty object? That's an _arrow function_ within _JSX interpolation_. — jonrsharpe, Jul 05 '21 at 12:54
Thanks @Apostolos it changes the error to `Type 'KeyboardEvent' is not generic. TS2315 ` — Jamie Hutber, Jul 05 '21 at 12:57
Does [this StackOverflow answer](https://stackoverflow.com/a/54943030/14426823) help you? I.e, try using the `KeyboardEvent` component from React: `React.KeyboardEvent` — Bao Huynh Lam, Jul 05 '21 at 12:58
@cmprogram that is true, but it's still not clear to me what _empty_ object you're seeing. If you're keying on the braces `{}`, neither pair shown is delimiting an object literal. `onKeyUp` is being set to a function that calls `console.info()`, not an empty object. — jonrsharpe, Jul 05 '21 at 12:59
@BaoHuynhLam is correct. the correct way is `onKeyUp={(e: React.KeyboardEvent) => {` — Apostolos, Jul 05 '21 at 13:02
As suggested, `React.KeyboardEvent) => {` was the key... I have so much to learn yet about TS lol. Now how to get the value from it :P — Jamie Hutber, Jul 05 '21 at 13:06

score 10 · Accepted Answer · answered Jul 05 '21 at 13:16

First of all, as Bao Huynh Lam stated in comments, you need to use this

onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {

as type of event. Then, in order to take the value of input, you can cast e.target as HTMLInputElement and then get its value.

Check this small sandbox

<input
  type="text"
  placeholder="Search for claim ID"
  onKeyUp={(e: React.KeyboardEvent<HTMLInputElement>) => {
    console.info((e.target as HTMLInputElement).value);
  }}
/>

score 0 · Answer 2 · answered Jul 05 '21 at 13:16

According to this guide of handling keyboard events, it seems that your type check e: keyboardEvent should be e: React.KeyBoardEvent<HTMLInputElement>. Also, see this related answer for onkeypress. Also you may want to set the types in a separate line as shown here.
Bonus: relevant answer here for this topic.

Typing an input's keyup in react TypeScript

TS Error

Component

2 Answers2