React Spring中useSpring返回值的Props类型定义问题

你可以直接使用react-spring提供的SpringValue类型来定义这个props，步骤如下：

1. 先从react-spring导入该类型：

import { SpringValue } from 'react-spring';

2. 在子组件的Props接口里这样定义：

interface ChildComponentProps {
  dashArrayAnimation: SpringValue<{ strokeDasharray: number }>;
}

另一种推导方式（可选） #

如果你不想手动写属性类型，也可以用ReturnType来自动推导useSpring的返回类型：
在父组件中定义类型：

type DashArrayAnimationType = ReturnType<typeof useSpring<{ strokeDasharray: number }>>;

然后子组件Props直接使用这个类型：

interface ChildComponentProps {
  dashArrayAnimation: DashArrayAnimationType;
}

这里的核心是，SpringValue的泛型参数要和你useSpring里定义的动画属性结构对应——你的动画只用到了strokeDasharray这个数值类型的属性，所以泛型填{ strokeDasharray: number }就完全匹配了。

内容的提问来源于stack exchange，提问作者Talha