React-spring: TypeScript complains about passing SpringValue to Vector3 props

[lennerd]

🐛 Bug Report

Responding to https://github.com/pmndrs/react-spring/issues/892#issuecomment-732447996

When using react-spring with react-three-fiber in version 9.0.0-rc3, Typescript will complain about invalid types when using SpringValues. As a quick fix it's possible to use (prop as any) as T (as seen in the codesandbox example below with color).

The animation is working as expected.

Expected behavior

Augmented components from react-spring/three accept both SpringValue<T> and T (T being Vector3 for example).

Link to repro (highly encouraged)

https://codesandbox.io/s/recursing-bohr-xri52?file=/src/index.tsx

Environment

• react-spring v9.0.0-rc3
• react v17.0.0

[aleclarson]

Definitely a bug. :+1:

The type of props.scale should be this..

Vector3 | FluidValue<[x: number, y: number, z: number]> | undefined

..since THREE.Vector3 objects are not yet supported by useSpring.

[lennerd]

Okay, good to know. So, if useSpring is not supporting Vector3 from react-three-fiber … why does the animation work as expected?

[aleclarson]

You're using an array, not a THREE.Vector3 object.