In Typescript how to fix Cannot set property 'first' of undefined

Question

I'm trying to set a the sub property first that is defined in the Name interface but when do so I always get an error for example:

interface Name{
    first: string,
    last:string,
}

class Person{

    private name:Name

    public setName(firstName, lastName){
        this.name.first = firstName;
        this.name.last = lastName;
    }

}


var person1  = new Person();
person1.setName('Tracy','Herrera');

When running it i get the error: Cannot set property 'first' of undefined

Any one have an idea to work this out?

Answer 1

Class properties are not automatically initialized on instantiation. You need to initialize them with the corresponding objects manually -- in this case, with an object containing the properties defined by its interface:

class Person {
    private name: Name;

    public setName(firstName, lastName) {
        this.name = {
            first: firstName,
            last: lastName
        };
    }
}

---

Another approach -- for example, in case there are multiple methods setting properties on the same object -- is to first initialize the property to an empty object, preferably in the constructor:

class Person {
    private name: Name;

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

    public setName(firstName, lastName) {
        this.name.first = firstName;
        this.name.last = lastName;
    }

    public setFirstName(firstName) {
        this.name.first = firstName;
    }
}

However, with the current setup this will yield a compile error when assigning {} to this.name, because the Name interface requires the presence of a first and a last property on the object. To overcome this error, one might resort to defining optional properties on an interface:

interface Name {
    first?: string;
    last?: string;
}

Answer 2

You need to set name to an object of type Name (i.e. a shape matching that interface).

For example:

this.name = {
    first: 'John',
    last: 'Doe'
}