Question

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

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

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

提前致谢！

不能工作---

private vehicles: Vehicle[];

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

工作--- 车辆：车辆[]; vehicles.push（新车（1，＆＃39; Old Junker＆＃39;））; vehicles.push（新车（2，＆＃39; Old Junker2＆＃39;））;

示例类/接口设置。

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

然后从后端使用它来创建一系列车辆，而不是投射它们：

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

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

Answer 2

TypeScript中类和接口之间的主要区别在于运行时不存在接口。它们“仅”用于编译和类型检查。

将元素转换为接口/类“仅”告诉TypeScript该对象遵循它的结构，但它实际上不是该类型的实例。第一眼看上去有点令人不安。主要结果（在类的情况下）是强制转换不允许您使用类的方法。

我已经这样做了：

private vehicles: Vehicle[];

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

您遇到的确切编译错误是什么？

需要帮助理解angular2

2 个答案: