Combining object destructuring with stream typing

Question

I just added Flow to my Create-React-App project and when converting some of my calculation codes to an input type, I ran into this error with a destructed “object as parameters”

Original whitefish:

calcWeightOnConveyor({ tonsPerHour, conveyorLength, conveyorSpeed }) 

After stream 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 a stream with restructuring the object this way or should I redesign these function APIs?

Answer 1

As a rule, the template that I use, especially for the props of functional components, is as follows:

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

Answer 2

Yes, you can do this by annotating the entire object as follows:

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