Реактивная поза: Как определить типы реквизита в реактивной позе? (реквизит неявно имеет любой тип) - PullRequest
Новая
       27

Реактивная поза: Как определить типы реквизита в реактивной позе? (реквизит неявно имеет любой тип)

0 голосов
/ 09 мая 2019

Я использую TypeScript с реагировать-позу и мне нужно определить набор для реквизита.Это приложение, которое я только что начал с create-react-app версии 3.0.1.

Я получаю сообщение об ошибке Parameter 'props' implicitly has an 'any' type.

Я пытался определить тип элемента div, аналогичный styled-components: 

const FadeIn = posed.div<{ duration: number; hiddenOffset: number }>({
  visible: {
    opacity: 1,
    scale: 1,
    x: 0,
    y: 0,
    transition: { duration: props => props.duration }
  },
  hidden: {
    opacity: 0,
    scale: 0.8,
    x: props => props.hiddenOffset,
    y: 10
  }
});

Я также пытался определить компонент для использования вместо posed.div: 

const FadeInContainer: React.FC<{
  duration: number;
  hiddenOffset: number;
}> = props => {
  return <div {...props} />;
};

и передать его: 

const FadeIn = posed(FadeInContainer)({
  visible: {
    opacity: 1,
    scale: 1,
    x: 0,
    y: 0,
    transition: { duration: props => props.duration }
  },
  hidden: {
    opacity: 0,
    scale: 0.8,
    x: props => props.hiddenOffset,
    y: 10
  }
});

Что мне здесь не хватает?

1 Ответ

0 голосов
/ 10 мая 2019

Определение интерфейса для props и аннотирование аргумента функции, похоже, работает. 

interface Props {
  duration: number;
  hiddenOffset: number;
}

const FadeIn = posed.div({
  visible: {
    opacity: 1,
    scale: 1,
    x: 0,
    y: 0,
    transition: (props: Props) => ({ duration: props.duration })
  },
  hidden: {
    opacity: 0,
    scale: 0.8,
    x: (props: Props) => props.hiddenOffset,
    y: 10
  }
});
...