TypeScript类实现接口时如何批量赋值属性？附Angular实践疑问

1. 构造函数中优雅批量赋值属性解决TS2564错误 #

TypeScript抛出TS2564错误，是因为它无法识别Object.assign会完成属性初始化，以下是几种实用的解决方案：

方式一：给属性添加初始化断言! #

在类属性声明后追加!，明确告诉TypeScript该属性会在构造函数中完成初始化，无需提前赋值：

interface OrderInterface {
  orderId: string;
  customerName: string;
  totalAmount: number;
  // 其他大量属性...
}

class Order implements OrderInterface {
  // 所有属性添加!断言
  orderId!: string;
  customerName!: string;
  totalAmount!: number;
  // 其余属性同理

  constructor(data: OrderInterface) {
    Object.assign(this, data);
  }
}

方式二：类型断言绕过检查 #

在Object.assign调用时，将this断言为当前类类型，让TypeScript认可批量赋值的合法性：

class Order implements OrderInterface {
  orderId: string;
  customerName: string;
  totalAmount: number;
  // 其他属性

  constructor(data: OrderInterface) {
    Object.assign(this as Order, data);
  }
}

方式三：参数属性简化（适合属性较少场景） #

如果属性数量可控，可直接在构造函数中用参数属性定义类成员，但属性过多时，不如前两种方式高效：

class Order implements OrderInterface {
  constructor(
    public orderId: string,
    public customerName: string,
    public totalAmount: number
    // 其他参数属性
  ) {}
}

2. Angular中接口转类的最佳实践判断 #

需根据具体需求场景选择：

保留接口的场景 #

• 仅用于类型检查和数据传递：接口在编译阶段会被完全移除，不会增加打包体积，适合纯数据结构定义（比如API返回数据、组件间传递的对象）。
• 无需给数据添加方法：如果模型不需要自带格式化、验证等行为，接口足够轻量高效。

转为类的场景 #

• 需要给模型添加自身行为：比如订单类需要calculateDiscount()、formatOrderDate()这类与数据强绑定的方法，用类封装更符合面向对象原则。
• 用于Angular表单数据绑定：使用模板驱动表单或响应式表单时，实例化的类对象作为表单模型，比普通对象更适配表单状态绑定等逻辑。
• 需要统一初始化控制：比如要确保每个订单对象都有默认值，类的构造函数可以集中处理。

模型逻辑放服务的场景 #

如果逻辑是业务流程相关而非模型自身行为（比如提交订单、查询订单列表、更新订单状态），这类操作应放在服务类中，避免模型类承担过多业务职责，符合单一职责原则。

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