En React + TypeScript, ¿cómo puedo conocer directamente el 'tipo del objeto de evento' mediante la inferencia de tipos?

(VSCode)

Cuando desuno el evento del código jsx. (en la clase Component)

Como esto⬇

 handleSubmit = e => { ...}


render(){
return (
  <>
    <form onSubmit={this.handelSubmit}>
      <input
        ref={this.onRefInput}
        type='number'
        value={this.state.value}
        onChange={this.onChange}
      />
      <button>입력!</button>
    </form>
  </>
);}

Usualmente, cuando otros elevan el cursor sobre el "onSubmit"

tsc decir

"React.DOMAttributes< HTMLFormElement >onSubmit?:(evento: React.FormEvent< HTMLFormElement >)=> void) | indefinido "

introducir la descripción de la imagen aquí

¡Así que podemos conocer directamente el tipo del objeto del evento! (event: React.FormEvent)

✅ El problema es que mi código no anuncia como arriba.

Mi tsc dice

"React.DOMAttributes<HTMLFormElement>.onSubmit?: React.FormEventHandler<HTMLFormElement> | undefined"

¡Así que, no puedo conocer directamente el tipo del objeto evento!

Sé que hay muchas otras formas de conocer el tipo del objeto del evento.

¡Pero quiero saber directamente sobre el tipo del objeto del evento! mediante la inferencia de tipos.

📍¡Cómo puedo saber directamente sobre el tipo del objeto del evento! ¿por inferencia de tipo?

Respuesta #1

Puedes asignar un tipo ya sea a la función en sí o a los argumentos de la función, que es el evento.

React.FormEventHandler<HTMLFormElement>

Este es el tipo para la función. Si lo usas así:

handleSubmit: React.FormEventHandler<HTMLFormElement> = e => {
}

Entonces, el tipo de la variable e se inferirá automáticamente como React.FormEvent<HTMLFormElement>. Por lo tanto, en realidad no necesitas conocer el tipo de evento porque puedes aplicar un tipo a la función misma y obtener el tipo correcto.

O puedes asignar el tipo al argumento del evento e.

handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
}

Ahora el tipo para la propiedad handleSubmit se infiere como (e: React.FormEvent<HTMLFormElement>) => void.

Respuesta #2

De antemano, disculpa por eso. Esta respuesta no es una solución completa

Tuve el mismo problema, y busqué mucho, y traté de cambiar todos los settings.json sobre typescript.inlayHints. Desafortunadamente, nada funciona

Así que voy a la implementación de onSubmit

Si pasas el cursor sobre onSubmit con la tecla command (tal vez la tecla ctrl en otro sistema operativo) puedes ir a index.d.ts y entonces puedes ver

        onSubmit?: FormEventHandler<T> | undefined;

así que lo cambié como

        onSubmit?: (event: FormEvent<T>) => void | undefined;

y ahora puedo conseguir lo que quieres

Creo que la nueva versión de node_modules/@types/react/index.d.ts resulta como en la primera imagen.

Usar el tipo EventHandler también es una buena solución, si pasas el cursor sobre el parámetro e, puedes ver el Objeto Evento