如何在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;
    });
  }
}