Angular 18中TypeScript如何将普通对象转为带类型转换的类实例

核心问题说明 #

类型断言（as Item）只是TypeScript的编译时类型提示，不会改变对象的实际原型；直接用Object.assign({}, someObj)得到的仍是普通JS对象，无法访问类的原型方法（比如getTitle）。必须先创建类的实例，再将JSON属性映射并转换类型到实例上。

以下是几种简洁的实现方案：

方案1：简化构造函数处理类型转换 #

在类的构造函数中接收Partial类型的参数，同时完成属性赋值与类型转换逻辑，这是最直观的方式：

class Item {
  id: number = 0;
  title: string = '';
  active: boolean = false;
  date: Date = new Date();

  constructor(data?: Partial<Item>) {
    if (!data) return;
    
    // 基础属性赋值，保留默认值
    this.id = data.id ?? this.id;
    this.title = data.title ?? this.title;
    
    // 处理number转boolean：0→false，非0→true
    this.active = typeof data.active === 'number' ? data.active !== 0 : Boolean(data.active);
    
    // 处理日期（若JSON返回的是字符串/时间戳）
    this.date = data.date ? new Date(data.date) : this.date;
  }

  getTitle() {
    return this.title;
  }
}

// 使用示例
const someObj = { id: 1, title: 'some title', active: 1 };
const item = new Item(someObj);
console.log(item.getTitle()); // 输出 "some title"
console.log(typeof item.active); // 输出 "boolean"

方案2：静态工厂方法封装转换逻辑 #

如果不想让构造函数过于复杂，可以把类型转换逻辑封装到类的静态方法中，保持构造函数简洁：

class Item {
  id: number = 0;
  title: string = '';
  active: boolean = false;
  date: Date = new Date();

  getTitle() {
    return this.title;
  }

  static fromJson(data: Record<string, unknown>): Item {
    const item = new Item();
    
    // 类型安全的属性赋值与转换
    item.id = typeof data.id === 'number' ? data.id : item.id;
    item.title = typeof data.title === 'string' ? data.title : item.title;
    item.active = typeof data.active === 'number' ? data.active !== 0 : Boolean(data.active);
    item.date = data.date instanceof Date ? data.date : new Date(data.date || item.date);
    
    return item;
  }
}

// 使用示例
const someObj = { id: 1, title: 'some title', active: 1 };
const item = Item.fromJson(someObj);
console.log(item.getTitle()); // 正常调用类方法

方案3：Object.assign结合轻量类型修正 #

如果只是少量属性需要转换，可以先创建实例，用Object.assign批量赋值后再手动修正类型：

class Item {
  id: number = 0;
  title: string = '';
  active: boolean = false;
  date: Date = new Date();

  getTitle() {
    return this.title;
  }
}

// 使用示例
const someObj = { id: 1, title: 'some title', active: 1 };
const item = new Item();

// 批量赋值基础属性
Object.assign(item, someObj);
// 手动修正类型
item.active = Boolean(item.active);
// 若date是字符串/时间戳，也需转换
// item.date = new Date(item.date);

console.log(item.getTitle()); // 正常调用类方法

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