React-spring: Wrong value.interpolate() type

[vipseixas]

I tried to convert the "GESTURES (PULL & RELEASE)" example to typescript and the types don't match with reallity.

const [{ xy }, set] = useSpring(() => ({ xy: [0, 0] })) returns xy: OpaqueInterpolation<number[]> so xy.interpolate() expects (number[]) => string but in fact it only works with (number, number) => string

I had to use _as any_ to make it work...

const translate = (x: number, y: number) => `translate3d(${x}px, ${y}px, 0)`;
return <animated.div {...bind()} style={{ transform: xy.interpolate(translate as any) }} />

[drcmda]

for now i think that's fine, @jacobrask is currently making super efforts to transform the lib to TS, then we won't have to rely on contrib types - but it's gonna take a while.

[jacobrask]

I'm soon done with the interpolation + animated types and I will back port (copy paste) them to the current external type definitions first. Your case is supported by the new annotations, as AnimatedArrays will properly expand to function arguments.

Just need to do some more testing, all APIs will now return a new SpringValue type which can be assigned to properties of animated components, but I need to make sure nothing breaks for people who wrap with styled-components etc.

[aleclarson]

@jacobrask Please create a "draft PR" of your work on the types, so I can help out and use them locally. Thanks!

[jacobrask]

Everything I have done so far is currently merged into master