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

Question

Я использую 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
  }
});

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

Answer 1

Определение интерфейса для 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
  }
});