Combining the Parameter Properties shorthand with Destructuring in TypeScript

Buzinas picture Buzinas · Oct 19, 2015 · Viewed 8.9k times · Source

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?

Answer

elm picture elm · Aug 4, 2017

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.