Using react-spring with typescript has presented some challenges, even on the initial test, as evident from the prominent typescript checking issues below.
Could there be a fundamental error in the way I am utilizing it, or is there a relatively painless solution to rectify this issue?
<Spring
from={{ number: 0 }}
to={ { number: num } }
delay = {delay}
config = { config.molasses }>
>
{props => <div>{props.number.toFixed() }</div>}
</Spring>
This code snippet results in the following error:
No overload matches this call.
Overload 1 of 2, '(props: Readonly<SpringProps<{ number: number; }>>): Spring<{ number: number; }>', gave the following error.
Type '{ children: (string | ((props: { number: number; }) => Element))[]; from: { number: number; }; to: { number: number; }; delay: number; config: SpringConfig; }' is not assignable to type 'Readonly<SpringProps<{ number: number; }>>'.
Types of property 'children' are incompatible.
Type '(string | ((props: { number: number; }) => Element))[]' is not assignable to type 'SpringRendererFunc<{ number: number; }>'.
Type '(string | ((props: { number: number; }) => Element))[]' provides no match for the signature '(params: { number: number; }): ReactNode'.
Overload 2 of 2, '(props: SpringProps<{ number: number; }>, context?: any): Spring<{ number: number; }>', gave the following error.
Type '{ children: (string | ((props: { number: number; }) => Element))[]; from: { number: number; }; to: { number: number; }; delay: number; config: SpringConfig; }' is not assignable to type 'Readonly<SpringProps<{ number: number; }>>'.
Types of property 'children' are incompatible.
Type '(string | ((props: { number: number; }) => Element))[]' is not assignable to type 'SpringRendererFunc<{ number: number; }>'.
It appears to be potentially related to a typescript and React.Children issue. React Component children typecheck with typescript