react-transition 的样式对象导致“无索引签名”错误答案

【问题标题】：style object for react-transition causes 'no index signature' errorreact-transition 的样式对象导致“无索引签名”错误
【发布时间】：2019-06-16 20:23:14
【问题描述】：

我正在尝试使用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.

相关代码如下：

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] }}> 是错误消息标记的第 75 行。

我不明白为什么会导致错误，尤其是我在其他 typescript 模块中使用了类似的代码。

【问题讨论】：

标签： typescript react-transition-group

【解决方案1】：

这一行

const transitionStyles = {

应该改为

const transitionStyles: React.CSSProperties = {

【讨论】：

【解决方案2】：

您可能需要做两件事中的一件。

我相信你需要用"noImplicitAny": false配置tsconfig

如果这不能解决问题，那么可能是 typescript 正在检查库本身的类型。您需要告诉它不要使用：

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

通过：Allow implicit any only for definition files

【讨论】：