Typescript error when using useSwipable hook and applying handlers.

[domhede]

Using the hook, I have typed the handlers as SwipeableHandlers and spread them on to the swipeable div. However this results in a Typescript error. Any help would be most appreciated. Thanks

Error

Type '{ children: Element[]; ref: ({}: HTMLElement) => void; onMouseDown?: ((event: MouseEvent<Element, MouseEvent>) => void) | undefined; className: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
  Type '{ children: Element[]; ref: ({}: HTMLElement) => void; onMouseDown?: ((event: MouseEvent<Element, MouseEvent>) => void) | undefined; className: string; }' is not assignable to type 'ClassAttributes<HTMLDivElement>'.
    Types of property 'ref' are incompatible.
      Type '({}: HTMLElement) => void' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
        Type '({}: HTMLElement) => void' is not assignable to type '(instance: HTMLDivElement | null) => void'.
          Types of parameters '__0' and 'instance' are incompatible.
            Type 'HTMLDivElement | null' is not assignable to type 'HTMLElement'.
              Type 'null' is not assignable to type 'HTMLElement'.ts(2322)

Code

    const handlers: SwipeableHandlers = useSwipeable({
        onSwipedLeft: handleOnSwipedLeft,
        onSwipedRight: handleOnSwipedRight,
        onSwiped: handleOnSwiped,
        onSwiping: handleSwiping,
        delta: horizontalSwipeThreshold,
        preventDefaultTouchmoveEvent: true,
        trackTouch: true,
    });

    return (
        <div {...handlers}>
           ...
        </div>
    );

[domhede]

I suspect the type definition for SwipeHandlers may not be correct. Allowing for null fixes the error.

ie.

export interface SwipeableHandlers {
    ref: ({  }: HTMLElement | null) => void;
    onMouseDown?: React.MouseEventHandler;
}

[hartzis]

@domhede Thanks for the issue and finding a possible solution. Able to make a PR?

Do you have any insight as to why our test passes? What version of typescript are you using?

Test: https://github.com/dogfessional/react-swipeable/blob/master/types/test.tsx#L54-L58

[hartzis]

@domhede Do you know if this is the root issue, from tslint, palantir/tslint#4589?

[domhede]

@hartzis I don't think so, the error message seems to point to the types of ref not matching. As to why the test still pass, I don't think it's to do with the TS version but rather the linting rules/config.