"Unsafe assignment of an any value" when using react-transition-group with TypeScript

Question

I have various @typescript-eslint errors when using the Transition component from react-transition-group.

I followed the official React Transition Group small example for JS but with TypeScript + ESLint on my project I'm getting the following error: Unsafe assignment of an any value.

Another related error which is element implicitly has an 'any' type because expression of type 'string' can't be used to index type.

const transition = {
  transitionStyles: {
    entering: { opacity: 0, transform: 'translateX(0rem)' },
    entered: { opacity: 1, transform: 'translateX(0rem)' },
    exiting: { opacity: 1, transform: 'translateX(2rem)' },
    exited: { opacity: 0, transform: 'translateX(-2rem)' },
    unmounted: { opacity: 0, transform: 'translateX(-2rem)' },
  } as { [key: string]: React.CSSProperties },
};

<Transition in timeout={700}>
  {(state) => (
    <div style={{ ...transition.transitionStyles[state] }}>
      /* ... */
    </div>
  )}
</Transition>

score 1 · Answer 1 · answered Dec 22 '20 at 16:19

You need to cast the state variable as a string, because it's by default a TransitionStatus (declared from react-transition-group):
```
{(state: string) => (
  <div style={{ ...transition.transitionStyles[state] }}>
    /* ... */
  </div>
)}
```

Then proceed to cast the transitionStyles any object into a typed object, which returns for each key a React.CSSProperties object. This can be done like this:

const transition = {
  transitionStyles: {
    entering: { opacity: 0, transform: 'translateX(0rem)' },
    entered: { opacity: 1, transform: 'translateX(0rem)' },
    exiting: { opacity: 1, transform: 'translateX(2rem)' },
    exited: { opacity: 0, transform: 'translateX(-2rem)' },
    unmounted: { opacity: 0, transform: 'translateX(-2rem)' },
  } as { [key: string]: React.CSSProperties }
};

"Unsafe assignment of an any value" when using react-transition-group with TypeScript

1 Answers1