reactjs - Evento onKeyDown en React con TypeScript

En mi componente de React tengo el siguiente elemento de entrada:

  <input
    max={120}
    type="number"
    value={numValue}
    onKeyDown={handleKeyDown}
  />

Y esta es mi función handleKeyDown:

  const handleKeyDown = (evt: KeyboardEvent) => {
    console.log(evt.key);
    console.log(evt.target.value);
  }

Y este es el error que obtengo de TypeScript

Property 'value' does not exist on type 'EventTarget'.

¿Cuál es el tipo de evento que necesito asignar para que cubra tanto evt.target.value como evt.key?

Respuesta #1

Hay dos problemas:

La forma en que escribes tu código evita que el compilador de TypeScript infiera el tipo del objetivo actual del evento. Puedes insertar la función en línea de esta manera:

  <input max={120} type="number" value={numValue} onKeyDown={(evt) => {...}} />

o ayudar al compilador así:

  const handleKeyDown = (evt: React.KeyboardEvent<HTMLInputElement>) => {...}

Pero el problema no desaparecerá. En este caso, podemos estar seguros de que evt.target es una instancia de HTMLInputElement porque los elementos input no pueden tener hijos. Pero no podemos estarlo en el caso general. Por ejemplo, si tu manejador de eventos estaba adjunto a un <div> con un <input> dentro, el div podría recibir eventos donde evt.target no sea un HTMLDivElement sino un HTMLInputElement debido a la propagación de eventos!

evt.currentTarget lograría lo que quieres. O, en este caso particular, una aserción de tipo ((evt.target as HTMLInputElement).value) también es segura.