新增设备POST请求报TypeError：无法读取undefined的discountValue属性

• 你仅在Device类中声明了ValidationDetail属性的类型为ValidationDetailVM，但没有对该属性做初始化操作。运行时执行new AccessDeviceModels.Device()生成实例后，newDevice.ValidationDetail的实际值为undefined，直接访问undefined的discountValue属性就会触发该类型错误。
• TypeScript的类型声明仅用于编译时类型校验，不会自动在运行时为类的属性生成实例，自定义类类型的属性需要手动实例化后才能访问内部属性。

可以选择任意一种方案修复：

方案1：在Device类内部默认初始化ValidationDetail属性 #

修改Device类的定义，声明属性的同时完成实例化：

export class Device {
  id: number;
  siteId: number;
  // 直接初始化关联的ValidationDetail实例
  ValidationDetail: ValidationDetailVM = new ValidationDetailVM();
}

修改后原有表单提交逻辑不需要改动，new Device()时会自动生成可用的ValidationDetail实例。

方案2：在表单提交逻辑中手动实例化后再赋值 #

不需要修改类定义，只需要调整提交方法的逻辑，先给newDevice.ValidationDetail赋值实例再操作内部属性：

onNewDeviceAddFormSubmitted(value: AccessDeviceModels.Device): void {
  const newDevice = new AccessDeviceModels.Device();
  newDevice.siteId = +value.siteId;
  // 先实例化再赋值内部属性
  newDevice.ValidationDetail = new AccessDeviceModels.ValidationDetailVM();
  newDevice.ValidationDetail.discountValue = +value.ValidationDetail.discountValue;
}

额外优化建议 #

如果入参value的ValidationDetail也可能为undefined，可以加可选链+默认值逻辑避免入参侧的报错：

newDevice.ValidationDetail.discountValue = +value?.ValidationDetail?.discountValue ?? 0;

内容的提问来源于stack exchange，提问作者Allison.A