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?

[tamish-max]

Yes — your Omit<..., 'currentTarget' | 'target'> direction is the right fix.

The problem with the current intersection style is that if E already carries a broad or any-typed currentTarget, intersecting it does not reliably narrow the way you want for custom elements. Replacing those fields first is safer.

A practical user-land helper looks like this:

type StrictEvent<T, E extends Event> =
  Omit<E, 'currentTarget' | 'target'> & {
    currentTarget: T;
    target: EventTarget & T;
  };

type CEHandler<T, E extends Event> = (e: StrictEvent<T, E>) => void;

interface MyTextarea extends HTMLElement {
  value: string;
}

const onInput: CEHandler<MyTextarea, CustomEvent<string>> = (e) => {
  console.log(e.currentTarget.value);
};

If you want to be extra conservative, you can keep target broader than T, because DOM target and currentTarget are not always identical. But the core idea is sound: strip the conflicting keys from E, then add your stricter versions back.