How to make typescript definitions that work with angular2fire observable responses?

Question

I'm building an Angular2 app on Firebase using angularfire2.

Items returned from the realtime db have additional fields on them (e.g. $key, $exists) that can be useful in your application. But if you don't include those keys in your model definitions, typescript throws errors.

For example, say I have a class called item:

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

When that item is returned via angularfire2 it has additional firebase fields (e.g. $key, $exists, etc.), that I sometimes want to access:

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

Is there a best practice for handling this? I could add the db keys directly to the model. Or maybe create a FB class that has $key, $exists, etc. and then have my Item class and other classes extend FB?

This is a bit of a contrived example, so code may not be exactly right, but hopefully my point/question is clear.

and what's wrong with specifying $key and $exists properties on the Item interface? — toskv
– toskv, Commented Jan 29, 2017 at 23:28
you could add them as optional properties of they aren't there all the time. :) — toskv
– toskv, Commented Jan 29, 2017 at 23:38
@toskv I could add the to the Item interface, but I have many models/db nodes and would need to add them to all, which seems redundant. So I was thinking of a base class. That would be my approach but i was wondering if there was a better way. — Jared_C
– Jared_C, Commented Jan 29, 2017 at 23:54
switching to interfaces is a better way of doing it. check out @cartant 's solution is the cleanest way in my opinion. :) — toskv
– toskv, Commented Jan 30, 2017 at 8:32

cartant · Accepted Answer · 2017-01-30 04:00:00Z

3

The items in this code:

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

will be an array of Object instances. It will not be an array of Item instances. That is, item instanceof Item will be false.

So it doesn't make a lot of sense to tell TypeScript that that's what they are.

Instead, you should use interfaces to describe the shape of the models. And if you were to use interfaces, using a base interface with the AngularFire2 properties is trivial:

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

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

edited Jan 30, 2017 at 4:00

answered Jan 30, 2017 at 1:34

cartant

58.6k17 gold badges169 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jared_C Over a year ago

I see, I was using classes when what I should use is an interface. Thanks! @cartant

Collectives™ on Stack Overflow

How to make typescript definitions that work with angular2fire observable responses?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related