TypeScript从JSON创建对象时部分JSON数据丢失问题咨询

这种数据丢失的情况在TS项目里挺常见的，咱一步步来排查解决：

1. 先检查类/接口是否漏定义了字段 #

这绝对是最常见的原因！如果你的TS类或者接口里没声明JSON中存在的某个字段，那这个字段肯定不会被映射到对象里——毕竟TS是静态类型语言，它只认你定义好的属性。另外还要注意大小写敏感，JSON里的userAddress和TS里的useraddress是两个完全不同的字段哦。

举个例子：

// 错误示范：JSON里有address，但类里没定义
class User {
  name: string;
  age: number;
  constructor(data: Partial<User>) {
    Object.assign(this, data);
  }
}

// 正确示范：把JSON里的所有字段都补上
class User {
  name: string;
  age: number;
  address: string; // 新增JSON中存在的字段
  constructor(data: Partial<User>) {
    Object.assign(this, data);
  }
}

2. 检查构造函数的赋值逻辑有没有漏 #

如果你是手动给类实例赋值，很容易不小心漏写某个字段；或者用了解构赋值，但解构的时候没把所有字段都列出来。

比如这种错误写法：

constructor(data: UserData) {
  this.name = data.name;
  this.age = data.age;
  // 漏了data.address的赋值，自然就丢失了
}

解决办法：

• 简单场景直接用Object.assign(this, data)批量赋值，省得手动写漏；
• 如果有嵌套对象，记得递归处理嵌套的类/接口，比如JSON里有user: { name: string }，那你得定义对应的UserInfo类，然后在构造函数里把data.user转成UserInfo实例。

3. 检查类型是否不匹配 #

如果JSON里的字段类型和TS定义的不一样，在严格模式下可能会被忽略或者赋值失败。比如JSON里的age是字符串"25"，但TS里定义成number，这时候直接赋值可能会变成NaN，看起来就像数据丢了。

解决办法：在构造函数里做类型转换，或者处理可能的null/undefined：

constructor(data: any) {
  this.name = String(data.name);
  this.age = Number(data.age) || 0; // 处理字符串转数字失败的情况
  this.address = data.address ?? ''; // 用空字符串兜底null/undefined
}

4. 可选字段有没有被误处理 #

如果JSON里的某些字段是可选的（有时候存在有时候不存在），但你在TS里没把它标记成可选（加?），在严格模式下可能会被编译器警告，甚至运行时被自动忽略。

比如：

// 正确写法：把可选字段标记为?
interface UserData {
  name: string;
  age: number;
  address?: string; // 这个字段在JSON里可能没有，所以标记为可选
}

5. 检查JSON.parse的reviver函数 #

如果你用了JSON.parse(jsonString, reviver)来解析JSON，那要注意reviver函数是不是过滤掉了某些字段。比如下面这种写法就会把address字段直接丢掉：

// 错误写法：reviver过滤了address字段
const userData = JSON.parse(jsonStr, (key, value) => {
  if (key === 'address') return undefined;
  return value;
});

解决办法：要么去掉reviver函数（如果不需要特殊处理的话），要么修改reviver的逻辑，确保它不会跳过你需要保留的字段。

调试小技巧 #

你可以在构造函数里先打印传入的原始JSON数据，确认数据确实完整传进来了：

constructor(data: any) {
  console.log('传入的原始JSON:', data); // 先确认数据没问题
  Object.assign(this, data);
  console.log('生成的对象:', this);
}

用浏览器控制台或者Node.js的调试工具对比两者的属性，就能快速定位到底是哪个字段没被正确映射。

内容的提问来源于stack exchange，提问作者Camila Rojí