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

This is indeed parameter destructuring; the `currentValue` and `stepIndex` inside the first brackets are destructured into those arguments. After the colon the type is specified. — Alowaniak, Jul 23 '19 at 12:40
Related in JavaScript: https://stackoverflow.com/q/10804982/4174897 — Kyll, Jul 23 '19 at 12:48

score 3 · Accepted Answer · edited Jul 23 '19 at 13:01

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

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

Read more about destructuring on the MDN.

1 Answers1