TypeScript complains about passing SpringValue to Vector3 props

[lennerd]

🐛 Bug Report

Responding to #892 (comment)

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. 👍

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.

[MaxTwentythree]

It's the same with position, btw

[joshuaellis]

You can typecast this unless you want to submit a PR to fix this.

[pooya121]

any update on this? it is a bit strange to typecast it every time

[joshuaellis]

You can typecast this unless you want to submit a PR to fix this.

@pooya121 see my above comment ⭐