1

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

dcsan
  • 11,333
  • 15
  • 77
  • 118

1 Answers1

0

oops extra > in my copypasta. TSX!

dcsan
  • 11,333
  • 15
  • 77
  • 118