Использование response-spring в классе компонентов TypeScript, вызывающем проблемы компиляции - PullRequest
Новая
       8

Использование response-spring в классе компонентов TypeScript, вызывающем проблемы компиляции

0 голосов
/ 30 сентября 2018

Я пытаюсь использовать кнопку смахивания в моем компоненте, аналогично в этом примере Мне удалось заставить его работать с 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: Type '(name: string) =>логическое значение |undefined «нельзя назначить типу» boolean |строка [] |((ключ: строка) => логическое значение) |(false & ((name: string) => boolean | undefined)) |(true & ((name: string) => boolean | undefined)) |(строка [] & ((имя: строка) => логическое значение | undefined)) |(((ключ: строка) => логическое значение) & ((имя: строка) => логическое значение | undefined)) |не определено.Тип '(имя: строка) => логическое значение |undefined «нельзя назначить типу» (ключ: строка) => логическое значение.Тип 'логическое значение |undefined 'нельзя назначить типу' boolean '.Тип 'undefined' нельзя назначить типу 'boolean'.

ОШИБКА в [at-loader] ./src/components/Person.tsx:21:59 TS2532: Возможно, объект 'undefined'.

ОШИБКА в [at-loader] ./src/components/Person.tsx:23:33 TS2345: Аргумент типа 'число |undefined 'не может быть назначен параметру типа' number '.Тип 'undefined' нельзя назначить типу 'number'.

ОШИБКА в [at-loader] ./src/components/Person.tsx:23:49 TS2532: Объект, возможно, 'undefined'.｢｢ wdm ｣: не удалось скомпилировать.

Это как-то связано с моими настройками tsconfig?В последние 10 часов я пытался запустить ответную пружину с примером жестов, используя Typescript и мои собственные файлы конфигурации.Буду признателен за направления.

Спасибо.

1 Ответ

0 голосов
/ 30 сентября 2018

Поскольку реквизиты xDelta и down являются необязательными, они будут undefined, если они не были переданы. Я предполагаю, что у вас есть опция компилятора strictNullChecks (или опция strict, которая включает в себяон) включен, поэтому TypeScript проверяет, правильно ли вы работаете с undefined.В этом случае самое простое решение, вероятно, состоит в том, чтобы воспользоваться преимуществами поддержки defaultProps, сделав реквизиты xDelta и down необязательными с точки зрения реализации компонента (снимите отметки ? в Props) и добавив следующее в класс Person (замените значения по умолчанию, которые вы на самом деле хотите): 

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

После внесения этого изменения у меня останется одна ошибка noImplicitAny на xпараметр в x => &grave;translate3d(${x}px,0,0)&grave;.Чтобы устранить эту ошибку, укажите правильный тип для x: я предполагаю, что это number или string.

...