在 TypeScript 组件 class 中使用 react-spring 抛出编译问题

Question

我正在尝试在我的组件中使用类似于 this example 的可滑动按钮，我能够使其与 React 一起使用，但 TypeScript 给我带来了问题。请查看下面的编译错误：

import * as React from 'react'
import { withGesture } from 'react-with-gesture'
import { Spring, animated } from 'react-spring'

interface Props {
  name: string
  sex: string
  age: string
  xDelta?: number
  down?: boolean
}

@withGesture
export class Person extends React.Component<Props, {}> {
  render() {
    const { xDelta, down, children } = this.props
    let x = 0
    return (
      <Spring native to={{ x: down ? xDelta : 0 }} immediate={name => down && name === 'x'}>
        {({ x }) => (
          <div className="item" style={{ backgroundColor: xDelta < 0 ? '#FF1C68' : '#14D790' }}>
            <animated.div className="fg" style={{ transform: x.interpolate(x => `translate3d(${x}px,0,0)`) }}>
              {down && Math.abs(xDelta) > 50 ? (xDelta < 0 ? 'Cancel' : 'Accept') : children}
            </animated.div>
          </div>
        )}
      </Spring>
    )
  }
}

export default Person

ERROR in [at-loader] ./src/components/Person.tsx:19:62 TS2322: Type '(name: string) => boolean | undefined' is not assignable to type 'boolean | string[] | ((key: string) => boolean) | (false & ((name: string) => boolean | undefined)) | (true & ((name: string) => boolean | undefined)) | (string[] & ((name: string) => boolean | undefined)) | (((key: string) => boolean) & ((name: string) => boolean | undefined)) | undefined'. Type '(name: string) => boolean | undefined' is not assignable to type '(key: string) => boolean'. Type 'boolean | undefined' is not assignable to type 'boolean'. Type 'undefined' is not assignable to type 'boolean'.

ERROR in [at-loader] ./src/components/Person.tsx:21:59 TS2532: Object is possibly 'undefined'.

ERROR in [at-loader] ./src/components/Person.tsx:23:33 TS2345: Argument of type 'number | undefined' is not assignable to parameter of type 'number'. Type 'undefined' is not assignable to type 'number'.

ERROR in [at-loader] ./src/components/Person.tsx:23:49 TS2532: Object is possibly 'undefined'. ℹ ｢wdm｣: Failed to compile.

这与我的 tsconfig 设置有关吗？在过去的 10 个小时里，我一直在尝试使用 Typescript 和我自己的配置文件来运行 react-spring 一个手势示例。我将不胜感激。

谢谢。

Answer 1

由于 xDelta 和 down 道具是可选的，如果它们没有传入，它们将是 undefined。我假设你有 strictNullChecks 编译器选项（或包含它的 strict 选项）已启用，因此 TypeScript 正在检查您是否正确处理了 undefined。在这种情况下，最简单的解决方案可能是通过从组件实现的角度使 xDelta 和 down 属性成为非可选属性来利用 defaultProps 支持（删除 ? 标记在 Props) 并在 class Person 中添加以下内容（替换您实际需要的默认值）：

  static defaultProps = {
    down: false,
    xDelta: 0
  };

进行此更改后，x => `translate3d(${x}px,0,0)` 中的 x 参数出现一个 noImplicitAny 错误。要解决该错误，请为 x 指定正确的类型：我猜它是 number 或 string。

在 TypeScript 组件 class 中使用 react-spring 抛出编译问题

Using react-spring in a TypeScript component class throwing compilation problems

typescript

reactjs

react-spring