React-spring: v9 type errors with typescript

[kodai3]

🤓 Question

Thanks for the great work!!
I believe it is because style require React.CSSProperty rather than any since v9.

when I try like this or
style={props}
is shows error because props returns SpringValue

and when like this or interpolate()
is shows error because string dose not meet PositionProperty type

so, how should I use position propperty with typescript

[dagstuan]

I noticed this too. With the new typings for the v9 beta interpolate is not working properly anymore if it's used for certain CSS properties such as visibility. Example here: https://codesandbox.io/s/flamboyant-tu-npoxr

[aleclarson]

As you've noticed, the position and visibility props have a string union type, rather than the wider string type. You need to cast your string to ensure it has the right type.

type Position = React.CSSProperties['position']

// In your `useSpring` call or similar:
from: { position: "absolute" as Position, opacity: 0 },

It would be unsafe for react-spring to widen those props to string, so you (unfortunately) need to manually ensure your values are the correct type.

[dagstuan]

@aleclarson would it be possible to define a generic overload for interpolate? Casting the result doesnt seem to be working: https://codesandbox.io/s/flamboyant-tu-npoxr

Ideally I would like to be able to call interpolate such as this: opacity.interpolate<Visibility>(x => x === 0 ? "hidden" : "visible")

[aleclarson]

@dagstuan I've made it less strict about the return type, so casting should work now. 👍

[dagstuan]

@aleclarson perfect, works great now, thank you! 👍

[aleclarson]

Note: For 100% type safety, you should be using as const instead.

[louisgv]

Note: For 100% type safety, you should be using as const instead.

Can you please elaborate? If you can give a quick code example. Thanks in advance!