angular 4 typescript destructuring doesn't work as expected

Question

Desctruturing doesn't work when using this. syntax

 {this.firstName, this.lastName} = this.data;

this.data has value of

{firstName: 'joe', lastName: 'smith'}

but after assigning the value of this.firstName and this.lastName is still null

Answer 1

Try the following to achieve destructuring without declaration:

({firstName: this.firstName, lastName: this.lastName} = this.data);

From MDN:

The round braces ( ... ) around the assignment statement is required syntax when using object literal destructuring assignment without a declaration.

The TypeScript compiler will also complain without the wrapping parenthesis.

Here is example in action.

Hopefully that helps!