reactjs - useSprings con TypeScript

function getDefaultOrder(items: any[]): number[] {
  return items.map((_, index) => index);
}

type SpringsHandler<T> = (index: number) => T;
type SpringValues = {
  zIndex: number,
  y: number,
  scale: number,
  shadow: number,
  immediate: boolean | ((v: string) => boolean),
};
function makeSpringsHandler(order: number[]): SpringsHandler<SpringValues> {
  return index => ({
    zIndex: 1,
    y: order.indexOf(index) * 50 + 30,
    scale: 1,
    shadow: 5,
    immediate: false,
  })
}

function useMySprings(items: any[]) {
  const order = useRef<number[]>([]);
  const [springs, setSprings] = useSprings(items.length, makeSpringsHandler(order.current));
  useEffect(() => {
    order.current = getDefaultOrder(items);
    setSprings(makeSpringsHandler(order.current)); // The error appears here "makeSpringsHandler(order.current)" cannot be the param for setSprings
  }, [items, setSprings]);

  return [springs];
}

Así que quiero crear un hook personalizado que tome un arreglo y devuelva los valores animados usando useSprings en TypeScript, pero el compilador no me permite pasar mi función manejadora a setSprings.

Y recibo el siguiente error:

No overload matches this call.
  Overload 1 of 2, '(ds: Partial<Merge<{ zIndex: number; y: number; scale: number; shadow: number; immediate: boolean | ((v: string) => boolean); } & UseSpringBaseProps, { from?: Partial<Pick<{ zIndex: number; y: number; scale: number; shadow: number; immediate: boolean | ((v: string) => boolean); }, "zIndex" | ... 2 more ... | "shadow">> | undefined; onRest?(ds: Partial<...>): void; }>>): void', gave the following error.
    Value of type 'SpringsHandler<SpringValues>' has no properties in common with type 'Partial<Merge<{ zIndex: number; y: number; scale: number; shadow: number; immediate: boolean | ((v: string) => boolean); } & UseSpringBaseProps, { from?: Partial<Pick<{ zIndex: number; y: number; scale: number; shadow: number; immediate: boolean | ((v: string) => boolean); }, "zIndex" | ... 2 more ... | "shadow">> |...'. Did you mean to call it?
  Overload 2 of 2, '(i: number): Partial<Merge<{ zIndex: number; y: number; scale: number; shadow: number; immediate: boolean | ((v: string) => boolean); } & UseSpringBaseProps, { from?: Partial<Pick<{ zIndex: number; y: number; scale: number; shadow: number; immediate: boolean | ((v: string) => boolean); }, "zIndex" | ... 2 more ... | "shadow">> | undefined; onRest?(ds: Partial<...>): void; }>>', gave the following error.
    Argument of type 'SpringsHandler<SpringValues>' is not assignable to parameter of type 'number'.ts(2769)
useMySprings.tsx(33, 16): Did you mean to call this expression?

¿Puede alguien decirme cuál podría ser el problema aquí? Escribí el mismo código en JavaScript y funciona bien.

Respuesta #1

Resulta que este es un error de react-spring, actualicé la biblioteca a la versión 9 y el error desapareció.