@react-spring/three Typescript error

[strblr]

🐛 Bug Report

Spring values can't be passed to animated react-three elements without casting to any :

import React, { useState } from "react";
import { Mesh } from "three";
import { MeshWobbleMaterial } from "@react-three/drei";
import { a, useSpring } from "react-spring/three";

type EntityProps = {
  color: string;
  position: [number, number, number];
};

function Entity({ color, position }: EntityProps) {
  const [expand, setExpand] = useState(false);
  const props = useSpring({
    scale: expand ? ([1.4, 1.4, 1.4] as const) : ([1, 1, 1] as const)
  });
  return (
    <a.mesh
      castShadow
      position={position}
      scale={props.scale}
      onClick={() => setExpand(!expand)}
    >
      <boxBufferGeometry args={[1, 1, 1]} />
      <MeshWobbleMaterial color={color} speed={2} factor={0.6} />
    </a.mesh>
  );
}

Type 'SpringValue<readonly [1.4, 1.4, 1.4] | readonly [1, 1, 1]>' is n
ot assignable to type 'number | Vector3 | [x: number, y: number, z: nu
mber] | FluidValue<number | [x: number, y: number, z: number], any> |
undefined'.
  Type 'SpringValue<readonly [1.4, 1.4, 1.4] | readonly [1, 1, 1]>' is
 missing the following properties from type 'Vector3': x, y, z, isVect
or3, and 71 more.  TS2322

    31 |       castShadow
    32 |       position={position}
  > 33 |       scale={props.scale}
       |       ^
    34 |       onClick={() => setExpand(!expand)}
    35 |     >
    36 |       <boxBufferGeometry args={[1, 1, 1]} />

Environment

• react-spring v9.1.2
• react v17.0.2

[joshuaellis]

We've had a similar report for this, this was my answer to that: #1302 (comment) If i'm honest, the ts files for three are a bit odd. If you think you could improve the TS bindings for either, feel free to make a contribution 😄