将 react-transition-group 与 TypeScript 一起使用时“任何值的不安全分配”答案

【问题标题】："Unsafe assignment of an any value" when using react-transition-group with TypeScript将 react-transition-group 与 TypeScript 一起使用时“任何值的不安全分配”
【发布时间】：2021-04-01 08:41:40
【问题描述】：

我在使用来自react-transition-group 的Transition 组件时遇到各种@typescript-eslint 错误。

我遵循了官方的 React Transition Group JS 小示例，但在我的项目中使用 TypeScript + ESLint 我收到以下错误：Unsafe assignment of an any value。

另一个相关的错误是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>

【问题讨论】：

标签： reactjs typescript react-transition-group react-typescript

【解决方案1】：

您需要将state 变量转换为字符串，因为默认情况下它是TransitionStatus（从react-transition-group 声明）：
```
{(state: string) => (
  <div style={{ ...transition.transitionStyles[state] }}>
    /* ... */
  </div>
)}
```

然后继续将transitionStylesany object 转换为类型化对象，该对象为每个key 返回一个React.CSSProperties 对象。可以这样做：

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 }
};

【讨论】：