Is it possible to implement more elegant object typing and destructive assignment?

Question

JavaScript

I caught myself constantly writing such and such strange constructions, repeating myself twice in the names of variables:

export const Component = ({
  prop1,
  prop2,
  prop3,
}: {
  prop1: string;
  prop2: number;
  prop3: boolean;
})=>{
//...
}

Is there a more elegant way to implement this?

Answer 1

And for starters, come up with a syntax for this that would not enter into direct conflict with JS and at the same time be intuitive.)
Here , many copies are broken on the topic, but, IMHO, there are no normal release-worthy options. )

Answer 2

You can move the type of props to a separate type / interface

type ComponentProps = {
  prop1: string;
  prop2: number;
  prop3: boolean;
}

and specify the type of props "ComponentProps"

export const Component = ({ prop1, prop2, prop3 }: ComponentProps) => {
  ...
}

You can also use the FC type (generic) and pass the type of props to this type

export const Component: FC<ComponentProps> = ({ prop1, prop2, prop3 }) => {
  ...
}