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）中，我只是用一个空对象初始化并命名为一天：

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>) {}
}

如果该类没有功能（您只是在使用它进行类型检查），则最好的方法是像这样声明一个接口（您也可以在其中使它们为null：）。

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;
    });
  }
}

Answer 2

我相信您正在使用“订单”进行类型检查。

您可以选择使用接口来代替创建和导出类。仅用于类型检查的接口，而类是类，则是对象工厂。

使用接口的另一个好处是，编译器在运行时不会为该接口生成任何JavaScript代码，从而减少了空间/内存。

您可以将此文件命名为order.ts：

export interface Order {
  id: number, 
  currency: string, 
  .
  .
}

在component.ts上，只需导入order.ts即可使用界面！

import { Order } from './order';
.
.
export class AppComponent {
  order: Order = undefined;
  .
  .
  fetch() {
    this.dataService.getValue().subscribe(response => {
      // assign reference to this.order
      this.order = response;
    })
  }

}

随时可以通过here阅读有关TypeScript接口的更多信息。

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

2 个答案: