Incompatible event types between linkEvent and onWhatever handlers

[jasontbradshaw]

Problem

After upgrading from v4.0.8 to v5.0.1 in a TypeScript/JSX project, for code like:

function handle(instance, e) {
  // ...
}

<div onClick={linkEvent(this, handle)}></div>

I get lots of errors like:

ERROR in [at-loader] ./whatever.tsx:12:34 
    TS2322: Type '{ children: Element; onClick: LinkedEvent<this, Event> | null; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>'.
  Type '{ children: Element; onClick: LinkedEvent<this, Event> | null; }' is not assignable to type 'HTMLAttributes<HTMLElement>'.
    Types of property 'onClick' are incompatible.
      Type 'LinkedEvent<this, Event> | null' is not assignable to type '((event: MouseEvent<HTMLElement>) => void) | LinkedEvent<any, MouseEvent<HTMLElement>> | undefined'.
        Type 'null' is not assignable to type '((event: MouseEvent<HTMLElement>) => void) | LinkedEvent<any, MouseEvent<HTMLElement>> | undefined'.

I believe this is caused by the type of linkEvent:

function linkEvent<T, E extends Event>(data: T, event: (data: T, event: E) => void): LinkedEvent<T, E> | null

being incompatible with the type of the various onWhatever handlers:

type EventHandler<E extends SemiSyntheticEvent<any>> = {
  bivarianceHack(event: E): void;
}['bivarianceHack'] | LinkedEvent<any, E>;

type ClipboardEventHandler<T> = EventHandler<ClipboardEvent<T>>;

interface DOMAttributes<T> {
  // ...
  onCopy?: ClipboardEventHandler<T>;
  // ...
}

Workaround

I can "solve" this problem like so:

<div onClick={linkEvent(this, handle) || undefined}></div>

However, this is not a very clean solution.

As far as possible solutions, I believe you could:

• Change linkEvent to return undefined instead of null
• Change the type of the various onWhatever handlers to accept null as a value, instead of just undefined.

The first solution would probably break backwards compatibility. For the second solution, I'm not sure what level of changes that would require, nor of the best place to add the requisite | null.

[Havunen]

Change the type of the various onWhatever handlers to accept null as a value, instead of just undefined.

Setting null to event listener should be possible. So there is something wrong in types.