style object for react-transition causes 'no index signature' error

Question

I am trying to use Transition

(75,45): error TS7017: Element implicitly has an 'any' type because type '{ entering: { opacity: number; }; entered: { opacity: number; }; exiting: { opacity: number; }; exited: { opacity: number; }; }' has no index signature.

Here is the related code:

import Transition from 'react-transition-group/Transition';

...

class AnimatedElement extends React.PureComponent {

  render = () => {
    const top = 50;
    const left = 35;
    const transitionStyles = {
      entering: { opacity: 1 },
      entered: { opacity: 1 },
      exiting: { opacity: 0.5 },
      exited: { opacity: 0 },
    };
    const duration = 500;
    const defaultStyle = {
      top,
      left,
      transform: 'scale(3)',
      transition: `opacity ${duration}ms ease-in-out`,
    };
    return (
        <Transition timeout={500} in={true}>
          {(state) => (
          <div style={{ ...defaultStyle, ...transitionStyles[state] }}>
            {this.props.image}
          </div>
          )}
        </Transition>
    );
  };
}

<div style={{ ...defaultStyle, ...transitionStyles[state] }}> is the line 75 flagged by the error message.

I don't understand why this is causing the error, especially I have used similar code in other typescript modules.

Answer 1

This line

const transitionStyles = {

should be changed to

const transitionStyles: React.CSSProperties = {

Answer 2

You may need to do 1 of two things.

I believe you'll need to configure tsconfig with "noImplicitAny": false

If that does not solve it then it may be that typescript is checking in the library itself for types. You'll need to tell it not to with:

{
    "compilerOptions": {
        "skipLibCheck": true,
        ...
    },
    ...
}

Via: Allow implicit any only for definition files