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

所以我想创建一个自定义挂钩，它接受一个数组和 returns 使用 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 的一个错误，我将库更新到 v9，错误消失了。

在 TypeScript 中使用 Springs

useSprings with TypeScript

typescript

reactjs

react-spring

react-hooks