TypeScript: Event properties can be omitted but not set to undefined

[WesSouza]

Describe the bug

The types for events are optional, but require a valid value if set.

Optional properties should allow undefined in case we want to programmatically set the property, such as in the example below, as the effect is most likely the same.

export function Test(props: {
  onClick?: () => void
}) {
  return (
    <>
      <button>No Errors</button>
      <button onClick={props.onClick}>Test</button>
      {/* ^ Type 'undefined' is not assignable to type 'EventHandlerUnion<HTMLDivElement, MouseEvent>'. ts(2375) */}
    </>
  );
}

Edit: adjusted example.

[otonashixav]

In general Solid's types aren't compatible with exactOptionalPropertyTypes, though a PR adding undefined as appropriate would be welcome.

In the specific example provided however, setting onClick to undefined won't do anything since

1. Events on DOM elements aren't reactive, so changing onClick wouldn't change the event handler from its initial value (do (event) => props.onClick?.(event) instead) and
2. You're not reading onClick in a reactive scope by destructuring (unless you're using a plugin that reinserts the prop access).

[WesSouza]

Thanks for the note on props, I still need to get properly familiar with the reactive-gotchas-for-React-developers 😅.

I see all of the properties are described in the jsx.d.ts file using EventHandlerUnion.

I wonder if it would be acceptable to just change that type to:

type EventHandlerUnion<T, E extends Event> = EventHandler<T, E> | BoundEventHandler<T, E> | undefined;

[otonashixav]

The types are in dom-expressions.

[WesSouza]

I can’t find anywhere that brings that codebase into the solid package. How does that work?

[ryansolid]

It's because dom-expressions is sort of a framework builder. In order to get a treeshakeable output we need to basically bundle it into Solid's output.