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:

Answer 1

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

Answer 2

if you want to have freedom, to make changes, separately you can do something like, using ?,

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

class Person{

    private name:Name

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

        public setNameSample(firstName: string){
            this.name = { first: firstName };
        }

        public setNameSample1(lastName: string){
            this.name = { last: lastName };
        }
}

In the above case if you do not use ? you would get something like in setNameSample for example if you need set only first :

Type '{ first: any; }' is not assignable to type 'Name'. Property 'last' is missing in

Note: I think the previous answer are the way to go, this is just an added.

Answer 3

You can also try this

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

class Person{

    private name = {} as Name;

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

}


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

Answer 4

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