AngularJS迁移Angular4遇问题：数组赋值对象时报AccomodationAddresses不存在

嘿，这个问题我帮好多从AngularJS转Angular的开发者踩过坑！核心原因其实是TypeScript的强类型机制和AngularJS的动态类型差异——AngularJS里你可以随便给对象塞新属性，但TypeScript是静态类型语言，它要求你必须提前告诉编译器：这个对象有哪些属性，不然它就会一脸懵地报错说“这个属性不存在”。

下面给你几个实用的解决方案，按需选择就行：

1. 用接口/类定义对象类型（最推荐） #

这是Angular官方最提倡的做法，既能享受TypeScript的类型检查，代码也更规范。

首先定义描述对象结构的接口（或者类）：

// 先定义地址子结构
interface Address {
  street: string;
  city: string;
  zipCode?: string; // 可选属性加?
}

// 再定义主对象的接口
interface UserProfile {
  userName: string;
  AccomodationAddresses: Address[]; // 明确声明这个数组属性
}

然后在组件里使用这个接口：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 初始化对象，确保属性存在
  userProfile: UserProfile = {
    userName: '',
    AccomodationAddresses: []
  };

  assignAddresses() {
    // 现在赋值完全没问题
    this.userProfile.AccomodationAddresses = [
      { street: '123 Main St', city: 'New York' },
      { street: '456 Oak Ave', city: 'Los Angeles' }
    ];
  }
}

如果需要更复杂的逻辑（比如初始化方法），也可以用类代替接口：

class UserProfile {
  userName: string = '';
  AccomodationAddresses: Address[] = [];

  // 可以通过构造函数接收初始数据
  constructor(initialData?: Partial<UserProfile>) {
    Object.assign(this, initialData);
  }
}

// 组件里实例化
userProfile = new UserProfile();

2. 临时方案：用any类型（不推荐，但应急可用） #

如果只是临时测试或者不想写完整的类型定义，可以把对象类型设为any，这样TypeScript会跳过类型检查：

export class YourComponent {
  // 用any类型绕开类型检查
  user: any = {};

  assignAddresses() {
    this.user.AccomodationAddresses = [/* 你的数组内容 */];
  }
}

⚠️ 注意：这种方式会失去TypeScript的类型保护，容易埋下后期bug，尽量少用。

3. 类型断言（适合已有对象的场景） #

如果你的对象是从后端API获取的，或者已经有初始值，可以用类型断言告诉编译器“这个对象确实有这个属性”：

export class YourComponent {
  // 断言对象包含AccomodationAddresses属性
  user = {} as { AccomodationAddresses: Address[] };

  assignAddresses() {
    this.user.AccomodationAddresses = [/* 数组内容 */];
  }
}

总结一下，优先用接口/类定义类型，这才是Angular+TypeScript的正确打开方式，能帮你在开发阶段就发现很多潜在问题～

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