使用带有 TypeScript 的 Springs

Question

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];
}

所以我想创建一个自定义钩子，它接受一个数组并在 TypeScript 中使用 useSprings 返回动画值，但编译器不允许我将处理函数传递给 setSprings。

我收到以下错误：

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?

谁能告诉我这可能是什么问题，我用 JavaScript 编写了相同的代码，它工作正常。

Answer 1

原来这是react-spring的bug，我把库更新到v9，错误消失了。