React-spring: type of SetUpdateCallbackFn is invalid

[uehaj]

🐛 Bug Report

typescript definition of wrong.
now it is:

export interface SetUpdateCallbackFn<DS extends object> {
  (ds: Partial<UseSpringProps<DS>>): void;
  (i: number): Partial<UseSpringProps<DS>>;
}

but it should be:

export interface SetUpdateCallbackFn<DS extends object> {
  (ds: Partial<UseSpringProps<DS>>): void;
  (f: (i: number) => Partial<UseSpringProps<DS>>): void; // this line
}

To Reproduce

import React, { useState } from 'react';
import { useSprings, animated, UseSpringProps } from 'react-spring';

// interface SetUpdateCallbackFn<DS extends object> {
//  (f: (i: number) => Partial<UseSpringProps<DS>>): void;
//}

const App: React.FC = () => {
  const [springs, set] = useSprings(3, index => ({ opacity: 1 }));
  return (
    <div style={{ padding: 15 }}>
      {springs.map(n => (
        <animated.div
          onClick={e => {
            set((n: number) => ({
              opacity: 2 * n,
            }));
          }}>
          {n.opacity}
        </animated.div>
      ))}
    </div>
  );
};

export default App;

this produce following error:

No overload matches this call.
  Overload 1 of 2, '(ds: Partial<Merge<{ opacity: number; } & UseSpringBaseProps, { from?: Partial<Pick<{ opacity: number; }, "opacity">> | undefined; onRest?(ds: Partial<Pick<{ opacity: number; }, "opacity">>): void; }>>): void', gave the following error.
    Value of type '(n: number) => { opacity: number; }' has no properties in common with type 'Partial<Merge<{ opacity: number; } & UseSpringBaseProps, { from?: Partial<Pick<{ opacity: number; }, "opacity">> | undefined; onRest?(ds: Partial<Pick<{ opacity: number; }, "opacity">>): void; }>>'. Did you mean to call it?
  Overload 2 of 2, '(i: number): Partial<Merge<{ opacity: number; } & UseSpringBaseProps, { from?: Partial<Pick<{ opacity: number; }, "opacity">> | undefined; onRest?(ds: Partial<Pick<{ opacity: number; }, "opacity">>): void; }>>', gave the following error.
    Argument of type '(n: number) => { opacity: number; }' is not assignable to parameter of type 'number'.  TS2769

    13 |         <animated.div
    14 |           onClick={e => {
  > 15 |             set((n: number) => ({
       |                 ^
    16 |               opacity: 2 * n,
    17 |             }));
    18 |           }}>

Steps to reproduce the behavior:

compile above code on typescript environment.

Expected behavior

work well same as on JavaScript.

Link to repro (highly encouraged)

(Please provide either a CodeSandbox demo or an example GitHub repo.)

Environment

• react-spring 8.0.27
• react v16.12.0
• typescript 3.7.3

[aleclarson]

Please use v9 beta if you're a TypeScript user. The v8 types are unmaintained.