"TS7017: элемент неявно имеет тип" любой "... не имеет подписи индекса", когда я использую реагирующую группу

Question

Вот мой код:

 renderSoundWave = () => {
    const defaultStyle = {
      opacity: 1,
      transition: `opacity ${DURATION}ms ease-in-out`,
    }

    const transitionStyles = {
      entering: { opacity: 1 },
      entered:  { opacity: 0 },
    };
    return (

    <Transition timeout={DURATION} in={this.animate}>
      {(state) => (
        <div className={styles.soundWaves}
             style={{ ...defaultStyle, ...transitionStyles[state]}}> {/* Error here! */
          <SoundWaves/>
        </div>
        )}
    </Transition>
      );
  }

Я хочу использовать Transition в react-transition-group оживить иконку SoundWave,

Однако я получаю эту ошибку:

ошибка TS7017: Элемент неявно имеет тип 'any', потому что тип '{ringing: { opacity: number; }; введено: {непрозрачность: число; }; }'не имеет индексной подписи.

Ошибка указывает на ...transitionStyles[state] выше

Я не понимаю, почему эта ошибка выдается. Что является причиной этого типа ошибки?

Answer 1

Я наконец исправил это, изменив transitionStyles в

const transitionStyles: { [id: string]: React.CSSProperties } = {
  entering: { opacity: 1 },
  entered:  { opacity: 0 },
};