What are those curly brackets within a function definition parameter?

Question

I have an Angular 5 project and I saw this Typescript code.

(method) CreateFlightComponent.handleSave({ currentValue, stepIndex }: {
    currentValue: Partial<Flight>;
    stepIndex: number;
}): void

---

Could anyone explain this part? Or is there any better way to express with a different syntax?

{ currentValue, stepIndex }: {
    currentValue: Partial<Flight>;
    stepIndex: number;
} 

Answer 1

Well, the handleSave function takes a complex type as input parameter, and returns void. The input type contains two properties:

• currentValue is of type Partial<Flight>
• stepIndex is of type number.

Another way to express the same with a different syntax could be:

interface IHandleTypeParams {
    currentValue: Partial<Flight>;
    stepIndex: number;
}

and then use the interface instead:

CreateFlightComponent.handleSave( input:IHandleTypeParams): void

or with destructuring:

CreateFlightComponent.handleSave({ currentValue, stepIndex }: IHandleTypeParams): void

See the playground.

Read more about destructuring on the MDN.