[bug]: render prop within <Spring> is inferred to any

[astj]

Which react-spring target are you using?

• @react-spring/web
• @react-spring/three
• @react-spring/native
• @react-spring/konva
• @react-spring/zdog

What version of react-spring are you using?

9.5.5 (maybe 9.5.3+?)

What's Wrong?

When <Spring> component used with render props, TypeScript compiler infers render prop as any, which makes compiler emit errors when noImplicitAny enabled.

With attached CodeSandbox (just using <Spring> component taken from https://react-spring.dev/components/spring#and-this-is-how-you-create-a-chain ), react-spring 9.5.2 works fine and infers styles prop as {opacity: SpringValue<number>, color: SpringValue<string>}. But 9.5.3+ infers it as any.

To Reproduce

Place some <Spring> components using render props in its children with TypeScript.

Expected Behaviour

The render prop in children of <Spring> is inferred to some object reflecting the component's from and to props' structure.

Link to repo

https://codesandbox.io/s/clever-jennings-wo8jet?file=/src/App.tsx

[joshuaellis]

Introduced between 9.5.2-9.5.3, probably due to this commit – 2725fc3

[astj]

@joshuaellis
Thank you for response. So, is it safe to downcast this any to expected structure manually as a workaround? (In other words, is it just a type-inference problem and actual js implementation is not changed?)

[joshuaellis]

It'll just be a type-inference problem.

Out of curiosity, how come you're still using the Component signatures of react-spring as opposed to hooks?

[astj]

Generally we use hooks, but according to commit logs in our repo we've changed few hooks to <Spring> some months ago. I believe there was a reason, but unfortunately we can't remember it anymore 😢

[joshuaellis]

Fixed on the current next line. <Spring>'s render prop is once again inferred from from/to as SpringValues (both overloads), so it no longer collapses to any under noImplicitAny:

<Spring to={{ opacity: 1, color: 'blue' }}>
  {styles => styles.opacity /* SpringValue<number> */}
</Spring>

Verified with a type-test that asserts the render-prop argument is { opacity: SpringValue<number>; color: SpringValue<string> } for both the to- and from-based overloads. Closing as resolved; the type-test guards against regression.