CODEWITHSUNDEEP
typescriptdestructuring
Buzinas
Buzinas

Reputation: 11725

Combining the Parameter Properties shorthand with Destructuring in TypeScript

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?

Upvotes: 25

Views: 11695

Answers (3)

elm
elm

Reputation: 391

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.

Upvotes: 6

Schmalls
Schmalls

Reputation: 1474

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

Upvotes: 1

Fenton
Fenton

Reputation: 250922

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.

Upvotes: 3

Related Questions