rest - 需要帮助理解 angular2 中的接口(interface)和/或抽象类

Question

我是 angular2 世界的新手。我试图为某些组件创建接口(interface)，然后在我的模型中实现这些接口(interface)，这样我就可以确保它们能够正常工作。

我注意到的一件事是，如果我创建这些对象的新实例，它们可以正常工作，但是当我从 restful 调用中提取数据时，我使用类型转换将数据转换为我期望的对象类型。以下代码是一个伪示例。

我有 Java/C++ 背景，所以我希望有人能看到我正在尝试做的事情，并向我解释如何让它正常工作。

提前致谢!

不起作用---

private vehicles: Vehicle[];

this._vehicleService.loadVehicles().subscribe(
vehicles => this.vehicles = <Vehicle[]>vehicles);

有效 --- 车辆:车辆[]； vehicles.push(new Vehicle(1, 'Old Junker')); vehicles.push(new Vehicle(2, 'Old Junker2'));

示例类/接口(interface)设置。

@Component
export class SelectableComponent {
  options : Selectable[]

  // Access options.label and options.value
}

export interface Selectable {
  label(): string;
  value(): any;
}

export class Vehicle implements Selectable {
  constructor (
    public id: number,
    public description: string,
  ){}   

  get label() : any {
    return this.description;
  }

  get value() : any {
    return this.id;
  }  
}

Answer 1

这里发生的是从后端检索到的对象只是一个普通的 Javascript 对象，它被转换为一个 Vehicle:

this._vehicleService.loadVehicles().subscribe(
 vehicles => this.vehicles = <Vehicle[]>vehicles);

此数组中的对象将具有 Vehicle 的所有数据，但没有 Vehicle 类实例的行为，正如您提到的那样，这可能会非常困惑。

最简单的方法不是转换它们，而是立即调用 new 并创建一个 Vehicle 实例，同时从后端检索它们。

但是使用较长的构造函数调用可能会很麻烦，尤其是当 Vehicle 有很多属性并且您需要将它们一一传递给构造函数时。

解决这个问题的方法是在 Vehicle 类中创建一个辅助方法:

class Vehicle {

    constructor(private name, private year) {

    }

    static fromJson({name,year}) {
        return new Vehicle(name, year);
    }
}

然后使用它从后端返回创建一个 Vehicles 数组，而不是转换它们:

this._vehicleService.loadVehicles().subscribe(
    vehicles => this.vehicles = vehicles.map(Vehicle.fromJson));

这样，结果中的车辆将不仅具有车辆的所有数据，还具有 Vehicle 类的行为，因为它们是 Vehicle 上的实例。