复杂的TypeScript接口和对象

Question

我有一个定义为：

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

然后在我的组件的Typescript文件中，我正在定义一个房屋地址：

address: Address;

constructor() {

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

虽然当我将地址记录到控制台时，我得到：

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

我以为我在构造函数中设置了addressType。是否有更有效的方法来做我正在做的事情？

- user10181542

Answer 1

在设置地址类型之前，您需要初始化this.address：

constructor() {

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

- jh314

---

下投票的原因是什么？这是唯一一个建议初始化整个“address”而不像其他答案那样创建不必要的对象并覆盖它们的答案。 - Aleksey L.

Answer 2

首先，将您的address初始化为一个对象。这将为您的对象提供内存，然后您可以初始化嵌套属性。

address: Address = { addressType: {} };

constructor() {

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

- Suren Srapyan

Answer 3

您需要初始化address属性，因为对于任何类型的属性进行注释都不会给出值，并且它的初始值为undefined。

您可以像这样初始化您的属性

address: Address = { addressType: {} };

但是我认为在这里最好的方法是基于地址接口创建一个类。

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

你可以像这样使用它。

address: Address = new Address();

地址类型的房产属性为未定义

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

为了解决上述错误，您可以像初始化addressType一样初始化house。

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

- Muhammed Albarmavi