Angular中TypeScript动态创建对象报错及解决方案咨询

错误原因 #

这个错误既不是TypeScript也不是Angular的规则限制，纯粹是变量未初始化导致的。你只声明了IdCardDetails的类型，但没有给它分配实际的对象实例，此时它的值是undefined，自然无法给undefined的属性赋值。

你在JavaScript里写let myObj = {}是直接初始化了空对象，而TypeScript中只做类型声明、不初始化的话，变量会保持undefined状态，这才是问题核心。

解决方案 #

这里有几种实用的解决方式：

1. 声明时初始化空对象并指定类型 #

// 先初始化空对象，通过类型断言指定结构
IdCardDetails: {name: string, empcode: number, bloodgroup: string} = {} as {name: string, empcode: number, bloodgroup: string};
// 之后正常赋值
IdCardDetails.name = this.idName;

嫌重复的话可以用类型别名简化：

type IdCardType = {name: string, empcode: number, bloodgroup: string};
IdCardDetails: IdCardType = {} as IdCardType;

2. 直接创建完整对象 #

如果已经知道所有属性的值，可以直接初始化完整对象：

IdCardDetails: {name: string, empcode: number, bloodgroup: string} = {
  name: this.idName,
  empcode: 1234,
  bloodgroup: 'A+'
};

3. 定义可选属性 #

如果部分属性暂时不需要赋值，可以把类型里的属性设为可选：

IdCardDetails: {name?: string, empcode?: number, bloodgroup?: string} = {};
IdCardDetails.name = this.idName; // 不会报错

是否必须用类式对象创建方式？ #

完全没必要。Angular中用类型别名（type）或接口（interface）定义对象结构，再配合普通对象就足够了，不是必须写Class。比如用接口的写法：

interface IdCardDetails {
  name: string;
  empcode: number;
  bloodgroup: string;
}

// 使用时直接初始化对象
IdCardDetails: IdCardDetails = {
  name: this.idName,
  empcode: 5678,
  bloodgroup: 'B-'
};

当然，如果对象需要包含方法或者实例化逻辑，用Class会更合适；但单纯存数据的话，type/interface加普通对象的写法更轻便。

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