Typescript - Conditional property of object

Question

I have the following object to which I wish to have a conditional property:

{
    name: this.username, 
    DOB: new Date(this.inputDate)
}

Say, I wish to add a third property called gender if the user has specified their gender. What would the proper syntax for the following be:

{
    name: this.username, 
    DOB: new Date(this.inputDate), 
    if(this.userGender) gender: this.userGender
}

P.S. I do not wish to have the gender property in my object if there is no value along with it. So how can I only create the property if the condition is satisfied?

Is there a reason you wouldn't just assign userGender conditionally? let myObject = { /*object without gender */ }; if(this.userGender) myObject.gender = this.userGender; — danh
– danh, Commented Jul 23, 2018 at 19:47
Its available in Dart - I wish it could be introduced into typescript — Antoniossss
– Antoniossss, Commented Oct 22, 2020 at 6:23

CRice · Accepted Answer · 2023-03-10 17:13:57Z

47

Ideally, you would just add the appropriate property as a second action after declaring your object. So something like:

const myObj = {
    name: this.username,
    DOB: new Date(this.inputDate),
}

if(this.userGender) myObj.gender = this.userGender;

However, sometimes it's nice to declare an "optional" property inline with the rest of them, in which case you can use object spread to get the effect you're looking for:

const myObj = {
    name: this.username,
    DOB: new Date(this.inputDate),

    ...this.userGender && { gender: this.userGender }
}

edited Mar 10, 2023 at 17:13

answered Jul 23, 2018 at 19:49

CRice

32.6k5 gold badges63 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Allen Luce Over a year ago

I don't believe the first form works in TypeScript: Property 'gender' does not exist on type '{ name: string; DOB: Date; }'.

cprcrack Over a year ago

You can also use undefined instead of {} as { ...undefined } has the same effect as { ...{} } (empty object)

BooBailey Over a year ago

in which case, we can do ...this.userGender && { gender: this.userGender }

Krisztián Balla Over a year ago

Adding properties to an already existing object at runtime is a bad idea because it slows down JavaScript. The reason is that in this case the JavaScript runtime environment will have build a history chain of the object. Why? Because you could access the object at different times resulting in different closures and versions of the object. Doing this a lot in your code is the biggest and most overlooked performance problem in applications.

Amir · Accepted Answer · 2022-03-08 06:22:17Z

25

it can be done like this too, more clean and readable.

const myObj = {
    name: this.username,
    DOB: new Date(this.inputDate),
    ...(this.userGender && { gender : this.userGender })
}

edited Mar 8, 2022 at 6:22

answered Sep 12, 2021 at 13:30

Amir

4344 silver badges9 bronze badges

Comments

Gurpreet Singh · Accepted Answer · 2023-05-05 14:00:08Z

-1

Try this

let userObj = { name: this.username, DOB: new Date(this.inputDate) }
if(this.userGender) 
    userObj["gender"] = this.userGender;

edited May 5, 2023 at 14:00

answered Jul 23, 2018 at 19:49

Gurpreet Singh

2271 silver badge12 bronze badges

3 Comments

Anthony Wieser Over a year ago

What does :gender do on the last line? I can't see where that's described in any documentation.

Kevin Wang Over a year ago

This (the :gender part) doesn't appear to be valid TS.

Gurpreet Singh Over a year ago

Updated the answer, ignore : it was a normal string

Collectives™ on Stack Overflow

Typescript - Conditional property of object

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related