Question

我正在使用angularfire2在Firebase上构建Angular2应用。

从实时数据库返回的项目上有其他字段（例如$ key，$ exists），这些字段在您的应用程序中很有用。但是，如果您不在模型定义中包含这些键，则打字稿会引发错误。

例如，假设我有一个名为item的类：

export class Item {
  name: string,
  price: number,
  isOnSale: boolean
}

当通过angularfire2返回该项目时，它有额外的firebase字段（例如$ key，$ exists等），我有时想要访问它们：

constructor(private af: AngularFire){
  this.af.database.list('items').subscribe(items => {
    items.forEach(item => this.doSomethingWithDbItem(item));
  })
}

doSomethingWithDbItemAndThenUpdate(item: Item){
  // Now, if I want to access the $key field, I get a typescript error because
  // $key does not exist on my class definition

  if( item.name === 'toy_truck'){
    const key = item.$key; // Will throw error typescript compile error
    this.af.database.object(`items/${key}`).set({isOnSale: true})
  }
}

是否有处理此问题的最佳做法？我可以直接将db键添加到模型中。或者也许创建一个具有$ key，$ exists等的FB类，然后让我的Item类和其他类扩展FB？

这是一个人为的例子，所以代码可能不完全正确，但希望我的意见/问题很明确。

Answer 1

此代码中的items：

this.af.database.list('items').subscribe(items => {
  items.forEach(item => this.doSomethingWithDbItem(item));
})

将是Object个实例的数组。它不是Item个实例的数组。也就是说，item instanceof Item将为false。

因此告诉TypeScript这就是它们的含义并没有多大意义。

相反，您应该使用接口来描述模型的形状。如果你要使用接口，使用带有AngularFire2属性的基接口是微不足道的：

export interface AngularFireObject {
  $exists: () => boolean;
  $key: string;
  $value?: any;
}

export interface Item extends AngularFireObject {
  name: string;
  price: number;
  isOnSale: boolean;
}

如何使用angular2fire可观察响应的打字稿定义？

1 个答案: