question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Combining destructuring with parameter properties

See original GitHub issue

Today, we can take advantage of parameter properties to reduce the boilerplate, e.g:

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

  }
}

Since 1.5, we can also use destructuring, e.g:

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

I’ve tried in many ways to combine both features, but had no success. So:

  1. Is it possible to combine them nowadays, and if yes, how?
  2. If not, could it be an improvement to a future TypeScript version? E.g:
class Person {
  constructor(public { firstName, lastName, age } : { firstName: string, lastName: string, age: number }) {

  }
}

// the code above would possibly transpile to:
var Person = (function () {
    function Person(_a) {
        var firstName = _a.firstName, lastName = _a.lastName, age = _a.age;
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
    }
    return Person;
})();

Issue Analytics

  • State:open
  • Created 8 years ago
  • Reactions:541
  • Comments:86 (8 by maintainers)

github_iconTop GitHub Comments

70reactions
GusBuonvcommented, Feb 3, 2021

As I saw no push back against it and a good showing of support for it, I’d like to resurface and bump @markm77’s suggestion on this. To repeat the proposed syntax:

interface Data {
  foo: string
  bar: string
}

class A {
  // new syntax simultaneously declares properties with access and mutability specifiers and initializes them from argument properties
  constructor({
    readonly public foo,
    readonly public bar,
  }: Data) {}
}

To me this suggestion has the following advantages:

  • It solves the original problem.
  • It is an easy-to-understand extension of an existing feature (JavaScript’s argument unpacking).
  • It cuts down on boilerplate.
  • It reduces the potential for errors in constructors (e.g. accidentally assigning data.foo to this.bar, unsafe & unnecessary reliance on Object.assign, etc).
  • It facilitates a basic design pattern: classes wrapping interfaces with functionality.
  • It does not rely on exotic or unfamiliar extensions to the language.

I would like to see this option get more discussion, so here are some questions that might get this moving. Is there anything that makes this impossible or overly burdensome to implement from a technical standpoint? Is there anything about the syntax that makes it unclear or prone to causing errors? Does this syntax fall short of facilitating the feature at the root of this thread?

57reactions
RyanCavanaughcommented, Nov 15, 2016

Accepting PRs to implement constructor(public {name1, name2}) forms (i.e. no public / private etc inside the {}s).

Read more comments on GitHub >

github_iconTop Results From Across the Web

How can I combine destructuring assignment and optional ...
If config weren't optional, I'd use destructuring assignment to do this without repeating longFieldName . But it is, so I get a type...
Read more >
Understanding Destructuring, Rest Parameters ... - DigitalOcean
Object destructuring and array destructuring can be combined in a single destructuring assignment. Default parameters can also be used with ...
Read more >
Destructuring assignment - JavaScript - MDN Web Docs
The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from ...
Read more >
JavaScript Object Destructuring, Spread Syntax, and the Rest ...
We create objects with curly braces {…} and a list of properties. A property is a key-value pair where the key must be...
Read more >
Destructuring Mixed Objects and Function Arguments in ES6
As alluded to in the intro, mixed destructuring involves the declaring and setting of variables from an object that contains attributes of ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found