how do i type e.key and e.target.value with typescript in react

Solution 1:

In the browser, events are bubbling, going from child to parent. the target element from your event is the source of the original event. In your case, the keyboard event will be dispatched from your input field, and will never come from another child.

Instead of using target, you can use currentTarget which corresponds to the DOM element on which the listener is attached. This will be your input field, and so will always be an HTMLInputElement.