Combining the Parameter Properties shorthand with Destructuring in TypeScript

Question

EDIT

I logged an issue on TypeScript's Github repo and they're accepting PRs for implementing it.

In TypeScript, when we want to automatically create properties in our class from the constructor definition, we can take advantage of the Parameter Properties shorthand, e.g:

class Person {
    constructor(public firstName : string, public lastName : number, public age : number) {

    }
}

And then, the transpiled Javascript will be:

var Person = (function () {
    function Person(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    return Person;
})();

But if we want to receive an object in our constructor, it would be something like:

interface IPerson {
    firstName : string,
    lastName : string,
    age: number
}

class Person {
    constructor(person : IPerson) {
        this.firstName = person.firstName;
        this.lastName = person.lastName;
        this.age = person.age;
    }
}

Since TypeScript 1.5, we can take advantage of destructuring, e.g:

class Person {
    constructor({firstName, lastName, age} : {firstName: string, lastName: string, age: number}) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
}

Question: How to combine the Parameter Properties shorthand and Destructuring in TypeScript?

I've tried to define public before the object definition, e.g:

class Person {
    constructor(public {firstName, lastName, age} : {firstName: string, lastName: string, age: number}) {

    }
}

Tried to define it before each variable, e.g:

class Person {
    constructor({public firstName, public lastName, public age} : {firstName: string, lastName: string, age: number}) {

    }
}

But I had no success. Any thoughts?

elm · Answer 1 · 2017-08-04T19:50:20.323

6

If you have access to Object.assign, this works:

class PersonData {
  firstName: string
  constructor(args : PersonData) {
    Object.assign(this, args)
  }
}

class Person extends PersonData{}

But note new instances will be populated by anything in args--you can't strip out just the keys you want to use.

edited Aug 04 '17 at 19:50

answered Aug 04 '17 at 19:22

elm

351
2
3

score 3 · Answer 2 · answered Oct 19 '15 at 17:54

There isn't currently a way to do this short-hand, so the closest you can get is to declare the properties longhand and assign the variables from the destructuring assignment:

class Person {
    firstName: string;
    lastName: string;
    age: number;

    constructor({firstName, lastName, age} : {firstName: string, lastName: string, age: number}) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
}

If you are doing that... you'll probably just decide to accept an IPerson and assign its members without using destructuring in the constructor at all.

Schmalls · Answer 3 · 2016-08-11T22:46:49.607

Another strategy is to use the ability to assign to a variable of a different name. This cuts down on one repetition in the constructor.

class Person {
    firstName: string;
    lastName: string;
    age: number;

    constructor(args: { firstName: string, lastName: string, age: number, }) {
        ({
            firstName: this.firstName,
            lastName: this.lastName,
            age: this.age,
        } = args);
    }
}

You can also move one of the definitions in the constructor to an interface.

interface PersonConstructorArgs {
    firstName: string;
    lastName: string;
    age: number;
}
class Person {
    firstName: string;
    lastName: string;
    age: number;

    constructor(args: PersonConstructorArgs) {
        ({
            firstName: this.firstName,
            lastName: this.lastName,
            age: this.age,
        } = args);
    }
}

This will be useful when you have a hierarchy.

interface PersonConstructorArgs {
    firstName: string;
    lastName: string;
    age: number;
}
class Person {
    firstName: string;
    lastName: string;
    age: number;

    constructor(args: PersonConstructorArgs) {
        ({
            firstName: this.firstName,
            lastName: this.lastName,
            age: this.age,
        } = args);
    }
}
interface EmployeeConstructorArgs extends PersonConstructorArgs {
    manager: Person;
}
class Employee extends Person {
    manager: Person;

    constructor(args: EmployeeConstructorArgs) {
        super(args);
        ({
            manager: this.manager,
        } = args);
    }
}

Do you know why is it necessary to wrap the destructuring assignment within parenthesis? I mean e.g. the outer `()` in `({ manager: this.manager } = args);`. I found that to be necessary when mapping over object properties (as *this.manager*), while usually they are not needed when mapping over local variables — superjos, Apr 27 '17 at 19:50
There is a note in the [Object Destructuring section](https://www.typescriptlang.org/docs/handbook/variable-declarations.html#object-destructuring) of the TypeScript handbook that says "Notice that we had to surround this statement with parentheses. JavaScript normally parses a { as the start of block." So the reason is that it would think it was a block instead of an object destructuring. — Schmalls, Apr 27 '17 at 21:14

Combining the Parameter Properties shorthand with Destructuring in TypeScript

EDIT

3 Answers3

Linked