Aurelia/TypeScript问题：接口类型变量赋值时出现TS2339错误

你遇到的TS2339错误，本质是TypeScript在严格类型检查下，发现this.address可能处于undefined状态，但你直接尝试访问它的stateShortName属性。要解决这个问题，核心是确保address始终拥有一个符合AddressDetails接口的合法实例，下面是几种可行的方案：

1. 提前初始化Address对象（最推荐） #

在Address视图模型类中，声明address时就给它一个符合接口的默认空对象。这样无论父组件是否传入数据，address都不会是undefined，从根源上避免类型错误：

interface AddressDetails {
  address1: string;
  address2: string;
  suburb: string;
  postcode: string;
  stateShortName: string;
  addressLocationId: number;
}

export class Address {
  // 初始化一个符合接口的空地址对象
  address: AddressDetails = {
    address1: '',
    address2: '',
    suburb: '',
    postcode: '',
    stateShortName: '',
    addressLocationId: 0 // 若业务允许，也可设为null，但需修改接口为`number | null`
  };

  // 接收compose传入的model（Aurelia会通过activate生命周期传递参数）
  activate(model?: AddressDetails) {
    // 如果有传入的已有地址数据，覆盖初始值
    if (model) {
      // 使用扩展运算符合并，避免直接引用父组件的原对象
      this.address = { ...this.address, ...model };
    }
  }
}

之后你的fetch回调就可以简化，直接赋值即可：

fetch("/api/selectData/GetStatesAndCompanyStateId", { method: "GET", headers })
 .then(response => response.json())
 .then(data => {
   for (const key in data.stateDropDownList) {
     this.states[key] = data.stateDropDownList[key].stateShortName;
   }
   // 因为address已经初始化，直接赋值默认州值即可
   if (!this.address.stateShortName) {
     this.address.stateShortName = data.companyStateShortName;
   }
 })

2. 临时创建对象（适合不提前初始化的场景） #

如果不想提前初始化address，可以在判断它为undefined时，先创建一个完整的AddressDetails实例再赋值：

fetch("/api/selectData/GetStatesAndCompanyStateId", { method: "GET", headers })
 .then(response => response.json())
 .then(data => {
   for (const key in data.stateDropDownList) {
     this.states[key] = data.stateDropDownList[key].stateShortName;
   }
   if (!this.address) {
     // 创建新的地址对象并设置默认州值
     this.address = {
       address1: '',
       address2: '',
       suburb: '',
       postcode: '',
       stateShortName: data.companyStateShortName,
       addressLocationId: 0
     };
   } else {
     // 若已有地址数据，可根据需求更新州值
     this.address.stateShortName = data.companyStateShortName;
   }
 })

3. 调整接口为可选字段（谨慎使用） #

如果业务允许地址字段为空，可以将AddressDetails的字段设为可选类型，但这会降低类型安全性，后续使用时需要处理可能的undefined值：

interface AddressDetails {
  address1?: string;
  address2?: string;
  suburb?: string;
  postcode?: string;
  stateShortName?: string;
  addressLocationId?: number;
}

export class Address {
  // 初始化一个空的部分地址对象
  address: Partial<AddressDetails> = {};
}

关键提示 #

别忘了Aurelia的compose组件是通过activate生命周期方法传递model参数的，一定要在Address类中实现activate方法来接收父组件传入的地址数据，这样才能正确区分“编辑已有地址”和“新建地址”的场景。

内容的提问来源于stack exchange，提问作者si2030