如何在TypeScript / Angular中初始化类型化的对象？

Question

我是Angular＆TypeScript的新手，试图弄清楚如何实例化对象（在api请求返回真实数据之前）。

例如，我的模型如下所示：

//order.model.ts
export class Order {
  constructor(public id: number, currency: string, public contact: Object, public items: Array<Object>) {}
}

然后，我尝试在我的一个组件中实例化该组件，比方说App组件：

//app.component.ts
export class AppComponent {
  @Input()
  public order: Order = new Order();
}

当然，它在实例化new Order()时希望接收4个参数，但接收到0。实际上我是否必须为Order的每个属性传递未定义/空值？

在良好的React中（不带TS），我将使用一个空对象进行初始化并将其命名为day：

this.state = {
 order: {}
}

在Angular / TS中，这种事情的最佳实践是什么？

Answer 1

是的，因为当前已设置它，所以您必须将4个默认参数传递给构造函数。

公共秩序：Order = new Order（1，''，{}，[]）;

或者，您可以通过添加？将每个属性设置为可为空。 像这样：

export class Order {
  constructor(public id?: number, currency?: string, public contact?: Object, public items?: Array<Object>) {}
}

如果该类没有功能（您只是在使用它进行类型检查），那么最好的方法是像这样声明一个接口（您也可以在此处用？s使其变为可空）：

export interface Order {
    id: number;
    currency: string;
    contact: Object;
    items: Object[];
}

然后在您拥有所有必需的值之前，不要在组件中初始化该值：

//app.component.ts
export class AppComponent {
  @Input()
  public order: Order;

  // just an example
  setValues(id: number, currency: string, contact: Object, items: Object[]) {
    this.order = {
      id: id,
      currency: currency,
      contact: contact,
      items: items
    }
  }

  // example for if you receive object with correct fields from backend
  getData() {
    this.service.getData().subscribe(result => {
       this.order = result;
    });
  }
}