react-pose：如何在 react-pose 中定义道具的类型？（道具隐式具有任何类型）

Question

我将 TypeScript 与 react-pose 一起使用，需要定义 props 的类型。这是我刚开始使用 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
  }
});

react-pose：如何在 react-pose 中定义道具的类型？（道具隐式具有任何类型）

react-pose: How do I define the types for props in react-pose? (props implicitly has any type)

typescript

reactjs

react-pose

react-pose：如何在 react-pose 中定义道具的类型？ （道具隐式具有任何类型）

react-pose: How do I define the types for props in react-pose? (props implicitly has any type)

typescript

reactjs

react-pose

react-pose：如何在 react-pose 中定义道具的类型？（道具隐式具有任何类型）