TypeScript中对象属性读取返回undefined问题求助

嘿，我一眼就瞅出问题所在了！咱们来拆解下：

问题根源 #

你定义的CustomerGroupModel类属性是大写开头的（Id, Name, Active），但控制台打印出来的实际对象属性却是小写开头的（id, name, active）——这就是为什么你访问customerGroup.Name会返回undefined：因为这个对象里根本不存在Name这个属性，只有小写的name！

这里要注意TypeScript的一个关键特性：类型注解只是编译时的检查，运行时普通对象不会自动转换成类的实例，也不会自动匹配属性名的大小写。你大概率是直接把从表单、API或者其他地方拿到的普通小写属性对象，当成了CustomerGroupModel的实例来用，才会出现这种不匹配的情况。

解决方案 #

根据你的需求，有几种可行的解决方式：

1. 手动映射属性到类实例 #

如果需要保持类的大写属性定义，那你得把拿到的小写属性对象手动映射成CustomerGroupModel的实例：

// 假设你从表单/API拿到的原始数据是这样的
const rawGroup = {id: 2, name: "Group2", active: false, customers: []};

// 方式一：直接赋值
const customerGroup = new CustomerGroupModel();
customerGroup.Id = rawGroup.id;
customerGroup.Name = rawGroup.name;
customerGroup.Active = rawGroup.active;

// 方式二：给类添加构造函数，简化实例创建
export class CustomerGroupModel {
  public Id: number;
  public Name: string;
  public Active: boolean;

  constructor(id: number, name: string, active: boolean) {
    this.Id = id;
    this.Name = name;
    this.Active = active;
  }
}
// 用构造函数创建实例
const customerGroup = new CustomerGroupModel(rawGroup.id, rawGroup.name, rawGroup.active);

2. 统一属性名大小写 #

如果不需要区分大小写，直接修改类的属性定义，和实际对象的属性名保持一致（推荐这种更简洁的方式）：

export class CustomerGroupModel { 
  public id: number; 
  public name: string; 
  public active: boolean; 
}

// 之后访问属性就正常了
console.log(customerGroup.name); // 输出"Group2"

避坑提醒：不要依赖类型断言 #

很多人会用as CustomerGroupModel来断言类型，但这只是骗编译器“这个对象符合类型”，运行时不会做任何属性转换，所以还是会出问题：

// 这种写法没用！运行时对象还是原来的小写属性
const customerGroup = rawGroup as CustomerGroupModel;
console.log(customerGroup.Name); // 依然是undefined

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