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

Question

I'm using TypeScript with react-pose and need to define the typings for props. This is an application I just started with create-react-app version 3.0.1.

I keep getting the error Parameter 'props' implicitly has an 'any' type.

I've tried Defining the type on the div similar to 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
  }
});

I've also tried defining a component to use in place of posed.div:

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

and passing it:

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
  }
});

What am I missing here?

Answer 1

Defining an interface for props and annotating the function argument seems to work.

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
  }
});