Complex Typescript Interface with Objects

Question

I have an interface defined as:

export interface Address {
    addressType: {
        house?: {
            streetAddress: string,
            city: string,
            zip: string,
        },
        apartment?: {
            streetAddress: "",
            unitNumber: "",
            city: "",
            zip: "",
            buildingName?: "",
        },
    }
    instructions?: string;
}

Then in my Typescript file of my component, I am defining a house address:

address: Address;

constructor() {

    this.address.addressType = {
      house: {
        streetAddress: "1 test",
        city: "test city",
        zip: "92222",
      }
    }        
    console.log(this.address);
}

Though when I log the address to the console, I get:

Uncaught (in promise): TypeError: Cannot set property 'addressType' of undefined

I thought I was setting the addressType in the constructor. Is there a more efficient way to do what I'm doing?

jh314 · Accepted Answer · 2018-08-14 04:36:17Z

5

You need to initialize this.address before you can set its addressType:

constructor() {

    this.address = {
      addressType: {
        house: {
          streetAddress: "1 test",
          city: "test city",
          zip: "92222",
        }
      }
    };        
    console.log(this.address);
}

answered Aug 14, 2018 at 4:36

jh314

27.9k16 gold badges66 silver badges83 bronze badges

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

1 Comment

Aleksey L. Over a year ago

What's the reason for downvote? This is the only answer suggesting to initialise the whole address and not creating unnecessary objects and overriding them like other answers do.

Suren Srapyan · Accepted Answer · 2018-08-14 04:54:07Z

3

First initialize your address to refer to an object. This will serve a memory for your object and then you can initialize nested properties.

address: Address = { addressType: {} };

constructor() {

    this.address.addressType = {
      house: {
        streetAddress: "1 test",
        city: "test city",
        zip: "92222",
      }
    }        
    console.log(this.address);
}

edited Aug 14, 2018 at 4:54

answered Aug 14, 2018 at 4:44

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Comments

Muhammed Albarmavi · Accepted Answer · 2018-08-14 06:11:37Z

You have to initialize your address property becuase anotate any property with type don't give a value and it 's initil value in undefined.

You can iniltalize you property like this

address: Address = { addressType: {} };

But I think the best approtue here is to create a class base on the Address Interface

export interface IAddress {
  addressType: {
    house?: {
      streetAddress: string,
      city: string,
      zip: string,
    },
    apartment?: {
      streetAddress: "",
      unitNumber: "",
      city: "",
      zip: "",
      buildingName?: "",
    },
  }
  instructions?: string;
}

class Address implements IAddress {
  addressType: { house?: { streetAddress: string; city: string; zip: string; }; 
  apartment?: { streetAddress: ""; unitNumber: ""; city: ""; zip: ""; buildingName?: ""; }; };
  instructions?: string;
  constructor() {
    this.addressType = {}; 
  }
}

and you can use it like this

address: Address = new Address();

house property of addressType is undefined

// this will throw an error can't read streetAddress of undefined
{{address.addressType.house.streetAddress}}

in order to solve the error above you can initialize house same like addressType

  constructor() {
    this.addressType = {}; 
    this.addressType.house = {}
  }

Collectives™ on Stack Overflow

Complex Typescript Interface with Objects

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related