1

我试图在我的组件中使用与此示例类似的可滑动按钮，我能够使其与 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

[at-loader] ./src/components/Person.tsx:19:62 TS2322 中的错误：类型 '(name: string) => boolean | undefined' 不可分配给类型 'boolean | 字符串[] | （（键：字符串）=> 布尔值）| (false & ((name: string) => boolean | undefined)) | (true & ((name: string) => boolean | undefined)) | (string[] & ((name: string) => boolean | undefined)) | (((key: string) => boolean) & ((name: string) => boolean | undefined)) | 不明确的'。输入 '(name: string) => boolean | undefined' 不能分配给类型 '(key: string) => boolean'。输入'布尔| undefined' 不能分配给类型 'boolean'。类型“未定义”不可分配给类型“布尔”。

[at-loader] ./src/components/Person.tsx:21:59 TS2532 中的错误：对象可能是“未定义”。

[at-loader] 中的错误 ./src/components/Person.tsx:23:33 TS2345: 类型参数 'number | undefined' 不能分配给“number”类型的参数。类型“未定义”不可分配给类型“数字”。

[at-loader] ./src/components/Person.tsx:23:49 TS2532 中的错误：对象可能是“未定义”。ℹ｢wdm｣：编译失败。

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

谢谢。

4

1 回答 1

1

由于xDelta和道具是可选的，如果它们没有被传入down，它们将会是。我假设您启用了编译器选项（或包含它的选项），因此 TypeScript 正在检查您是否正确处理。在这种情况下，最简单的解决方案可能是利用支持，从组件实现的角度使and props 非可选（删除 中的标记）并在类中添加以下内容（替换您实际想要的默认值):undefinedstrictNullChecksstrictundefineddefaultPropsxDeltadown?PropsPerson

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

进行此更改后，我noImplicitAny在. 要解决该错误，请为 指定正确的类型：我猜它是或。xx => `translate3d(${x}px,0,0)`xnumberstring

于 2018-09-30T05:10:22.577 回答