angular 火灾查询集合文档示例代码不起作用

Question

I was reading on the angular fire docs specifically this one https://github.com/angular/angularfire/blob/master/docs/firestore/querying-collections.md

somewhere down below where the sample code is

this.items$ = combineLatest(
  this.sizeFilter$,
  this.colorFilter$
).pipe(
  switchMap(([size, color]) => 
    afs.collection('items', ref => {
      let query : firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
      if (size) { query = query.where('size', '==', size) };
      if (color) { query = query.where('color', '==', color) };
      return query;
    }).valueChanges()
  )
);

I get this error from "this.items$"

Type 'Observable<unknown[]>' is not assignable to type 'Observable<Item[]>'. Type 'unknown[]' is not assignable to type 'Item[]'. Type '{}' is missing the following properties from type 'Item': text, color,size(2322)

What did I miss?

I am using Visual Studio Code and these are the versions of Angular and angular fire

Angular v10.0.4 @angular/fire@^6.0.2

I've been trying to wrap my head around this for a few days now. I hope someone can give an advice.

Answer 1

You are missing the Generic type in the afs.colelction , should be --> afs.collection<Item> . Thats Why it returns an Unknown[] error.

this.items$ = combineLatest(
  this.sizeFilter$,
  this.colorFilter$
).pipe(
  switchMap(([size, color]) => 
    afs.collection<Item>('items', ref => { // generic type required here
      let query : firebase.firestore.CollectionReference | firebase.firestore.Query = ref;
      if (size) { query = query.where('size', '==', size) };
      if (color) { query = query.where('color', '==', color) };
      return query;
    }).valueChanges()
  )
);

Answer 2

It seems I have been overthinking and over trusting the docs so much. Thanks @sagat for another look on this one. The Angular Fire docs needs to be updated.

The docs should have wrote the code like this

afs.collection<Item>('items')

It does not bother Visual Studio Code anymore.