React-spring: 9.0.0-beta.1: Incompatible types/"Type […] is not assignable"

[pbock]

🐛 Bug Report

There appears to be a bug in the TypeScript typings for version 9.0.0-beta.1 that causes the type coming out of useSpring() to be incompatible with what <animated.…> expects, throwing errors such as:

src/index.tsx:7:24 - error TS2322: Type '{ [x: string]: AnimatedValue<any>; opacity: AnimatedValue<number>; }' is not assignable to type '{ alignContent?: string | AnimatedValue<string | undefined> | undefined; alignItems?: string | AnimatedValue<string | undefined> | undefined; alignSelf?: string | AnimatedValue<string | undefined> | undefined; ... 739 more ...; vectorEffect?: "none" | ... 7 more ... | undefined; }'.
  Types of property 'opacity' are incompatible.
    Type 'AnimatedValue<number>' is not assignable to type 'number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | AnimatedValue<number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined> | undefined'.
      Type 'AnimatedValue<number>' is not assignable to type 'AnimatedValue<number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined>'.
        Type 'number | "inherit" | "-moz-initial" | "initial" | "revert" | "unset" | undefined' is not assignable to type 'number'.
          Type 'undefined' is not assignable to type 'number'.

7   return <animated.div style={props}>I will fade in</animated.div>;
                         ~~~~~

  node_modules/@types/react/index.d.ts:1658:9
    1658         style?: CSSProperties;
                 ~~~~~
    The expected type comes from property 'style' which is declared here on type 'IntrinsicAttributes & { hidden?: AnimatedProp<boolean | undefined>; dir?: AnimatedProp<string | undefined>; slot?: AnimatedProp<string | undefined>; style?: { alignContent?: string | ... 1 more ... | undefined; ... 741 more ...; vectorEffect?: "none" | ... 7 more ... | undefined; } | undefined; ... 250 more ...; ref...'


Found 1 error.

To Reproduce

Steps to reproduce the behavior:

1. Save this example (very slightly adapted from the documentation) as src/index.tsx:

   import * as React from "react";
   import { render } from "react-dom";
   import { animated, useSpring } from "react-spring";
   
   function App() {
    const props = useSpring({ opacity: 1, from: { opacity: 0 } });
    return <animated.div style={props}>I will fade in</animated.div>;
   }
   
   render(<App />, document.querySelector("#root"));
   

2. Compile it (tsc src/index.tsx --jsx react --strict).

3. Although the code runs as expected, an error (see above) is thrown.

A similar error occurs with value.interpolate():

<animated.div style={{ transform: props.value.interpolate(v => `scale(${v})`) }}>
  I will scale in
</animated.div>;

Expected behavior

The code should compile without any errors.

Link to repro (highly encouraged)

CodeSandbox demo – but irritatingly, the error only appears locally (after exporting to ZIP), not in the online demo :confused:

Environment

• react-spring v9.0.0-beta.1
• react v16.8.6

[flsilva]

I'm getting the same error.

[aleclarson]

This will be fixed in the next beta today

[aleclarson]

Please try with the newest beta 👍

[pbock]

That error does seem to be fixed, but the <animated.…> components are now causing trouble:

Type instantiation is excessively deep and possibly infinite. ts(2589)

I’m afraid I’m struggling to reproduce the error during compilation, I can only get it to show in my editor:

[aleclarson]

@pbock That error is fixed in v9.0.0-beta.4

[swannknani]

@aleclarson Issue is still present in 9.0.0-beta.34