SpringValue<number[]> is not assignable to Vector3

[Aslemammad]

🐛 Bug Report

I was playing with r3f and react-spring and had a little problem (which can be solved with the as keyword)

  const props = useSpring({
    scale: active ? [1.5, 1.5, 1.5] : [1, 1, 1],
    color: hovered ? 'hotpink' : 'gray',
  });
  // in the return
  <mesh // or animated.mesh
      scale={props.scale} // here's the type error
  >
  // it says: Type 'SpringValue<number[]>' is not assignable to type 'Vector3'.

If you can guide me some about the source code, I think I may solve it and send a PR.

[joshuaellis]

There's no guide, i'd advise you to get in and get dirty 💪🏼

[Aslemammad]

Let's go for it, I'll fix it.

[CodyJasonBennett]

So, from what I understand, this is exactly a TS issue? SpringValue appears to be array-like in testing, so it should work when that's fixed.

It's just a question of treating the spring as a Vector3 without undermining type-safety.

[joshuaellis]

I suppose the animated part should be changing the types to accept SpringValue<any>, so where the mesh's scale type is Vector3 it should actually be Vector3 | SpringValue<[number, number, number]>.

[joshuaellis]

I think the solution to this looking Animated & AnimatedArray probably to Typecast it, how would react-spring know this was meant to be a Vector3? Else we could look at amending the @types/three. You could always interpolate:

  const props = useSpring({
    scale: active ? [1.5, 1.5, 1.5] : [1, 1, 1],
    color: hovered ? 'hotpink' : 'gray',
  });
  <animated.mesh
      scale={props.scale.to(vals => myVector3.set(...vals))} // here's the type error
  >