Combining object destructuring with flow-typing

Question

I just added Flow to my Create-React-App project, and while converting some of my calculation code to flow-typed, I encountered this error with a destructured "object as params"

Original sig:

calcWeightOnConveyor({ tonsPerHour, conveyorLength, conveyorSpeed })

After flow-type:

calcWeightOnConveyor({ tonsPerHour: number, conveyorLength: number, conveyorSpeed: number }): number

And the error:

$ flow
Error: src/utils/vortex/calculate.js:31
 31: export function calcWeightOnConveyor({ tonsPerHour: number, conveyorLength: number, conveyorSpeed: number }) {
                                                                                 ^^^^^^ Strict mode function may not have duplicate parameter names

Is there a way to use flow with object destructuring in this way or should I redesign these function APIs?

Answer 1

Generally the pattern I follow, especially for functional components props is as follows:

type Props = {
  prop: Type,
};

const Component = ({
  prop,
}: Props) => ();

Answer 2

Yes you can do so by annotating the entire object like the following:

calcWeightOnConveyor({
  tonsPerHour,
  conveyorLength,
  conveyorSpeed
}: {
  tonsPerHour:number,
  conveyorLength:number,
  conveyorSpeed:number
}):number