JSX types: EventHandler['currentTarget'] is over-broad

[jamesarosen]

jsx.d.ts defines

interface EventHandler<T, E extends Event> {
  (
    e: E & {
      currentTarget: T;
      target: DOMElement;
    }
  ): void;
}

I'm trying to use EventHandler in user-land to define types for a Custom Element:

oninput?: JSX.EventHandler<MyTextarea, CustomEvent<never>>

But CustomEvent doesn't specify whether currentTarget exists one way or the other, so currentTarget is any & MyTextarea, which is any.

Instead, I believe the type should be

interface EventHandler<T, E extends Event> {
  (
    e: Omit<E, 'currentTarget' | 'target'> & {
      currentTarget: T;
      target: DOMElement;
    }
  ): void;
}

Am I on the right path?

See shoelace-style/webawesome#2129

[aniruddhaadak80]

@jamesarosen You are on the right track. If E already carries a wide currentTarget/target (or any), intersecting can indeed leak overly-broad types.

Your Omit<E, 'currentTarget' | 'target'> & { ... } approach is the common way to force the desired structural override and keep currentTarget strongly typed for custom elements.

In short: yes, replacing those keys before re-adding stricter ones is a sound direction.

Source:

• https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys

[jamesarosen]

So I guess the question becomes: does the team want a pull request to improve this?