TypeScript Default Value for property

Question

I have defined an Interface in TypeScript like below:

export interface User {
    id?: number;
    name?: string;
    logoUrl?: File;   
    emailUserName?: string;
    emailPassword?: string;
}

With User, I bind it to Angular html input. If I enter anything in the input, the User Object will contains the value, But, If I do not enter, the property like name will be undefine. How could I get empty value for name if I do not enter string for name. Update

<div *ngIf="hero">
<h2>{{hero.name}} details!</h2>
<div>
<label>id: </label>{{hero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="hero.name" placeholder="name" />
<input [(ngModel)]="hero.location" placeholder="location" />
</div>
<button (click)="goBack()">Back</button>
</div> 
//model
    export class Hero {
    private _location:string="test";
    constructor(){
    console.log(this._location);
    this.location=this._location;
    }
    public id: number;
    public name: string;
    public location:string;
    } 

goBack(): void {
console.log(this.hero);
// this.hero=new Hero();
// console.log(this.hero);
//this.location.back();
}
}

goBack will output hero without location property if I do not enter any value for it in input.

Nitzan Tomer · Accepted Answer · 2017-06-07 09:23:20Z

8

You can have a class for User instead of an interface, and in the getter do something like:

class User {
    private _name: string;
    ...

    get name() {
        return this._name || "";
    }
}

or even assign an empty string to this._name in the constructor.

If you prefer to use an interface you can have a function that does that:

function normalizeUser(user: User) {
    return Object.assign({ name: "" }, user);
}

Edit

Yes, here's how to set the default value in the ctor:

class User {
    private static DEFAULT_NAME = "";

    public name: string;
    ...

    constructor() {
        this.name = User.DEFAULT_NAME;
    }
}

As for the get name() part, it's an accessor, so if you use it then:

let a = new User();
console.log(a.name);

3 Comments

Edward Over a year ago

Could I set a default value in class constructor? For your User class, I am not sure how to use "get name()".

Nitzan Tomer Over a year ago

Check my revised answer

Edward Over a year ago

Thanks, with a click event to run above code, it will the run the constructor, and the default value will be set. But for a model binding in Angular, it will not work. I have updated my post with updated code.

score 5 · Accepted Answer · 2017-06-07 09:55:21Z

5

Also you can use this shorthand:

class User {
  constructor(public id: number = -1,
    public name: string = '',
    public logoUrl: File = 'defaultLogo.png' ,
    public emailUserName: string = ''
    public emailPassword: string = '') {}
}

edited Jun 7, 2017 at 9:55

answered Jun 7, 2017 at 8:35

user1280834

3 Comments

Edward Over a year ago

It seems it did not work, in constructor, we could not use '?', and even I remove this '?', the result is undefined

user1280834 Over a year ago

sorry, thats true! giving an default value implies '?', so any field with default value is optional. sorry i corrected the code!

Edward Over a year ago

I assume your code works when I try something like "let u=new User()", but it may not work when binding with Angular. Please check more information in my original post.

Sajeetharan · Accepted Answer · 2017-06-07 08:22:46Z

0

Cant you do?

this.user.name?this.user.name:"";

answered Jun 7, 2017 at 8:22

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

9 Comments

Edward Over a year ago

Normally, we pass model from component to service, I am afraid this is not a good solution for checking every property whether they are undefined.

Sajeetharan Over a year ago

i do not think if there any other solution for checking each property

Nitzan Tomer Over a year ago

I'd go with this.user.name || "" instead

CinCout Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review

Sajeetharan Over a year ago

@CinCout why do you say so

|

Collectives™ on Stack Overflow

TypeScript Default Value for property

3 Answers 3

Edit

3 Comments

3 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Edit

3 Comments

3 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related