Angular/Ionic中TS报错Cannot set property 'origin' of undefined求解

• TypeScript的接口仅作用于编译期的类型校验，不会在运行时生成对应的实体对象。原代码中仅通过let obj: Products;做了类型声明，运行时该变量的实际值为undefined，当尝试执行obj.origin = xxx给undefined的属性赋值时，就会直接触发Cannot set property 'origin' of undefined的运行时报错。
• 非空断言的使用逻辑完全错误：代码中写的obj.origin! = 赋值是在赋值语句的左值上加固的非空标记，这个标记仅对TS编译器生效，不改变任何运行时逻辑——本质上连obj本身都没有初始化，再加多少非空断言都无法解决运行时的undefined问题。
• 二维码解析逻辑缺少边界判断：如果传入的qrcode字符串中没有-分隔符，indexOf("-")会返回-1，substring(0, -1)的计算结果不符合预期，会引发后续逻辑异常。

需要调整三个核心环节：

1. 声明变量时完成对象初始化，不要只做类型声明
2. 对接口中非当前逻辑必须赋值的属性标记为可选（加?），避免初始化空对象时触发TS的类型缺失校验
3. 增加二维码分隔符的判断逻辑，避免格式异常

调整后的完整代码示例：

// 接口调整：非必须赋值的属性增加可选标记
export interface Products{
  id?: number;
  new?: boolean;
  origin: string;
  branch?: string;
  product?: string;
  quantity?: string;
  productId?: string;
  Detail_product?: string;
  Installed?: boolean;
}

// 组件业务逻辑
ngOnInit() {
  this.makeObject("03-2-450-2");
}

makeObject(qrcode: string) {
  // 关键修复：初始化实际的Products对象实例
  let obj = {} as Products;
  const Qrstring = qrcode;
  // 边界判断：校验二维码格式
  const separatorIndex = Qrstring.indexOf("-");
  if (separatorIndex === -1) {
    console.error("传入的二维码格式不合法，缺少分隔符");
    return;
  }
  // 正常赋值origin属性
  obj.origin = Qrstring.substring(0, separatorIndex);
  console.log(obj.origin); // 正常输出"03"
}

• TS的非空断言!仅用于消除编译器的类型提示，不能替代运行时的对象初始化步骤，不要依赖它解决运行时的undefined报错。
• 如果需要保留接口所有属性的必填校验，可以在初始化对象时给所有属性赋上默认值，例如：

  let obj: Products = {
    id: 0,
    new: false,
    origin: "",
    branch: "",
    product: "",
    quantity: "",
    productId: "",
    Detail_product: "",
    Installed: false
  }
  

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