TL;DR Object.getPrototypeOf(e.target) returns HTMLInputElement but the compiler says that the type is EventTarget
Long: I have a simple input
<input
className="FilterInput"
type="text"
placeholder="Search for names..."
onKeyUp={filter}
/>
and a function to manage the filter
const filter = (e: React.KeyboardEvent<HTMLInputElement>) => {
console.log(Object.getPrototypeOf(e.target)) // prints "HTMLInputElement"
console.log((e.target as HTMLInputElement).value);
// ... other code
}
I'm trying to understand better the theory that is behind the type management of Typescript, however I don't understand why I have to typehint
(e.target as HTMLInputElement).value
in the second console.log.
If I don't do it, the compiler (compile time) says Property 'value' does not exist on type 'EventTarget'.. So this means that at compile time the type of e.target is EventTarget.
However, at runtime tested with Object.getPrototypeOf(e.target), the type is HTMLInputElement (which has the value property).
Why is this happening? Is it an error in my code, something related to React or some part of the theory of the type management in Typescript that I'm missing?
Moreover, shouldn't the indication of the generic type in the parameter declaration (e: React.KeyboardEvent<HTMLInputElement>) be enough?
Thanks
