Definitelytyped: Hacer React.SyntheticEvent.target genérico sobre T, no React.SyntheticEvent.currentTarget

Probablemente se trate de un error cometido durante la fusión. Haga un PR.

vea # 11041, # 10784 y muchos más. Es un misterio por qué no se arregla incluso después de la fusión.

No siempre se puede saber el tipo de destino en tiempo de compilación. Hacerlo genérico tiene poco valor.
el objetivo es el origen del evento (que a nadie realmente le importa, podría ser un lapso dentro de un enlace, por ejemplo)
currentTarget es el elemento al que se adjunta el controlador de eventos, por lo que debería preocuparse mucho y escribir en consecuencia si adjuntó un conjunto de datos u otros atributos y tiene la intención de acceder en tiempo de ejecución.

Confiar en el objetivo en lugar de en el objetivo actual es un error de principiante que los morderá antes que después.

Por ejemplo:

  handleTabClick = (e: React.SyntheticEvent<HTMLLinkElement>) => {
    e.preventDefault()
    // !!! e.target.dataset is empty if user clicked the <span>, not the <a> !!!
    // !!! how can you type e.target? User might also have clicked the <a> if it has padding !!!
    // you have to use currentTarget, and it is the element that you know the type for sure
    if (e.currentTarget.dataset['closable'] === 'true') {
      this.close()
    }
  }

render() {
  return <a onClick={this.handleTabClick} data-closable="true">
      <span className="fatty">Click me!</span>
   </a>
}

Este código se utiliza para compilar, como debería.

Con la 'corrección' fusionada, e.currentTarget no se puede escribir (no puedo acceder a su conjunto de datos sin un error de tipo) y e.target ahora se escribe como HTMLLinkElement, cuando en realidad no hay forma podemos estar seguros de ello. (Es posible que haya hecho clic en el tramo interior.

En teoría, podríamos agregar un segundo genérico a SyntheticEvent, para escribir target, cuando el usuario esté seguro (no hay hijos para el controlador del evento, o todos tienen el mismo tipo). Pero tiene poco valor y es realmente engañoso (porque solo se aplica a casos particulares en los que usar el casting tendría mucho más sentido).
En particular, si no tiene hijos, puede usar currentTarget.

Además, es completamente incorrecto, en un DOMAttributes<SomeType> , obtienes un onClick : MouseEventHandler<SomeType> , luego obtienes EventHandler<MouseEvent<SomeType>> con

    interface EventHandler<E extends SyntheticEvent<any>> {
        (event: E): void;
    }

Absolutamente no puede escribir target de manera diferente a currentTarget. onClick espera un controlador de eventos que tenga el evento de manejo (también conocido como currentTarget) como genérico. No puede ser otra cosa, no se compilará.

@bbenezech

handleTabClick = (e: React.SyntheticEvent<HTMLLinkElement>) => { ... }

Sugiero en su lugar:

handleTabClick = (e: React.FormEvent<HTMLLinkElement>) => { ... }

También tienes ClipboardEvent<T> , CompositionEvent<T> , DragEvent<T> , FocusEvent<T> , KeyboardEvent<T> ...
SyntheticEvent es lo de bajo nivel.

Esto sigue siendo así en el repositorio @types NPM. Cualquier actualización sobre cuándo se publicará

Esto fue cambiado de nuevo. Ver # 12239.