reactjs - Typescript și React, tipuri diferite între timpul de compilare și timpul de execuție pentru React.KeyboardEvent<HTMLInputElement>

TL;DR Object.getPrototypeOf(e.target) returnează HTMLInputElement, dar compilatorul spune că tipul este EventTarget

Lung: Am o intrare simplă

      <input
        className="FilterInput"
        type="text"
        placeholder="Search for names..."
        onKeyUp={filter}
      />

și o funcție pentru a gestiona filtrul

    const filter = (e: React.KeyboardEvent<HTMLInputElement>) => {
        console.log(Object.getPrototypeOf(e.target)) // prints "HTMLInputElement"
        console.log((e.target as HTMLInputElement).value);
        // ... other code
    }

Încerc să înțeleg mai bine teoria din spatele gestionării tipurilor în Typescript, însă nu înțeleg de ce trebuie să folosesc typehint

(e.target as HTMLInputElement).value

în al doilea console.log.

Dacă nu o fac, compilatorul (în timpul compilării) spune Property 'value' does not exist on type 'EventTarget'.. Deci asta înseamnă că în timpul compilării tipul lui e.target este EventTarget.

Totuși, la rulare, testat cu Object.getPrototypeOf(e.target), tipul este HTMLInputElement (care are proprietatea value).

De ce se întâmplă asta? Este o eroare în codul meu, ceva legat de React sau ceva din teoria gestionării tipurilor în Typescript pe care îl scap?

Mai mult, nu ar trebui ca indicarea tipului generic în declarația parametrului (e: React.KeyboardEvent<HTMLInputElement>) să fie suficientă?

Mulțumesc

Răspuns #1

Răspunsul la aceasta este de fapt mai mult legat de JS și API-urile DOM decât de TypeScript.

Pe scurt, ceea ce vrei cu adevărat este event.currentTarget, deoarece acesta va fi elementul real la care ai atașat ascultătorul.

event.target poate fi orice element copil al elementului tău. Deoarece poate fi orice element - nu poate avea tip sigur, așa că este tipizat ca cel mai mic comun numitor, care este EventTarget. (dar trebuie să spun că nu sunt sigur de ce este EventTarget și nu Element)

Pentru mai multe informații, consultați acest răspuns: Care este exact diferența dintre proprietatea currentTarget și proprietatea target în JavaScript