I'm trying to use react-spring with typescript and even on the first test I get big typescript checking issues as below.
Is there a basic error in my usage, or a way to solve this without too much pain?
<Spring
from={{ number: 0 }}
to={ { number: num } }
delay = {delay}
config = { config.molasses }>
>
{props => <div>{props.number.toFixed() }</div>}
</Spring>
gives:
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; }>'.
maybe a typescript and React.Children problem. React Component children typecheck with typescript