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?
typescript destructuring
add a comment |
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?
typescript destructuring
add a comment |
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?
typescript destructuring
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?
typescript destructuring
typescript destructuring
edited Nov 20 '18 at 0:09
Buzinas
asked Oct 19 '15 at 15:11


BuzinasBuzinas
9,76212249
9,76212249
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
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.
add a comment |
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
1
There is a note in the Object Destructuring section 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
add a comment |
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.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33217963%2fcombining-the-parameter-properties-shorthand-with-destructuring-in-typescript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
add a comment |
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.
add a comment |
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.
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.
answered Oct 19 '15 at 17:54


FentonFenton
152k42287311
152k42287311
add a comment |
add a comment |
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
1
There is a note in the Object Destructuring section 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
add a comment |
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
1
There is a note in the Object Destructuring section 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
add a comment |
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);
}
}
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);
}
}
edited Aug 11 '16 at 22:46
answered Aug 7 '16 at 22:23
SchmallsSchmalls
92411218
92411218
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
1
There is a note in the Object Destructuring section 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
add a comment |
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
1
There is a note in the Object Destructuring section 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
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
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
1
1
There is a note in the Object Destructuring section 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
There is a note in the Object Destructuring section 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
add a comment |
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.
add a comment |
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.
add a comment |
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.
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 4 '17 at 19:50
answered Aug 4 '17 at 19:22
elmelm
312
312
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f33217963%2fcombining-the-parameter-properties-shorthand-with-destructuring-in-typescript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown