Advanced Typescript Interface Incorporating Objects

Question

Advanced Typescript Interface Incorporating Objects

I'm facing an issue with my address interface setup. Here is how it's defined:

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

In my Typescript component file, I have tried to define a house address like this:

address: Address;

constructor() {

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

However, when I log the address to the console, I encounter the error message:

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

I believed I was setting the addressType correctly in the constructor. Is there a more effective way to achieve what I intend to do?

angular typescript

Answer 1

Answer №1

Prior to setting the addressType property for this.address, it is essential that you first initialize it:

constructor() {

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

Answer 2

Prior to setting the addressType property for this.address, it is essential that you first initialize it:

constructor() {

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

Answer 3

Answer №2

Start by setting up your address variable to point to an object. This will allocate memory for your object and allow you to set nested properties later.

address: Address = { addressType: {} };

constructor() {

    this.address.addressType = {
      house: {
        streetAddress: "123 Main St",
        city: "Anytown",
        zip: "54321",
      }
    }        
    console.log(this.address);
}

Answer 4

Start by setting up your address variable to point to an object. This will allocate memory for your object and allow you to set nested properties later.

address: Address = { addressType: {} };

constructor() {

    this.address.addressType = {
      house: {
        streetAddress: "123 Main St",
        city: "Anytown",
        zip: "54321",
      }
    }        
    console.log(this.address);
}

Answer 5

Answer №3

To avoid any issues with uninitialized properties, it is important to initialize the address property before use. When a property is annotated with a type but not given a value, its initial value is set to undefined.

You can initialize the property like this:

address: Address = { addressType: {} };

However, a better approach would be to create a class based 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 = {}; 
  }
}

You can then use it like this:

address: Address = new Address();

The house property of addressType is currently undefined

// This will throw an error because you are trying to access streetAddress of undefined
{{address.addressType.house.streetAddress}}

To solve the error above, make sure to initialize the house property just like the addressType:

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

Answer 6

To avoid any issues with uninitialized properties, it is important to initialize the address property before use. When a property is annotated with a type but not given a value, its initial value is set to undefined.

You can initialize the property like this:

address: Address = { addressType: {} };

However, a better approach would be to create a class based 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 = {}; 
  }
}

You can then use it like this:

address: Address = new Address();

The house property of addressType is currently undefined

// This will throw an error because you are trying to access streetAddress of undefined
{{address.addressType.house.streetAddress}}

To solve the error above, make sure to initialize the house property just like the addressType:

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

Advanced Typescript Interface Incorporating Objects

Answer №1

Answer №2

Answer №3

Similar questions

How can Angular CLI add extra static resources while live reloading?

Is there a way to update Checkbox changes within a Datagrid without selecting the entire row?

"Utilizing the power of union types within a generic function

When assigning JSON to a class object, the local functions within the class became damaged

"Implementing a Filter for Selecting Multiple Options in Ionic Framework

The cross-origin resource sharing configuration has not been implemented

Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

Why should we include the '#' character in jhipster URLs?

Angular 6's lazy loading feature causing a problem of not being able to match any routes

Error when compiling TypeScript: The callback function provided in Array.map is not callable

Using jest-dom without Jest is definitely an interesting challenge that many developers may

The absence of 'SyncTestZoneSpec' error appeared while running karma test in angular 4

Attempting to utilize pdf.js may result in an error specifying that pdf.getPage is not a recognized function

Is the Typescript index signature limited to only working with the `any` type?

Troubleshooting a metadata issue while pre-compiling a feature module in Angular 2

Struggling to transmit data to material dialog in Angular2+

The art of binding styles and classes in code

Navigating with Angular 7

Retrieving data from a service and passing it between components in Angular 7

Creating an Angular 2 service that relies on other services, while allowing components to inject only the parent service