Type 'Observable<{}[]>'无法赋值给'Observable<T[]>'的TS错误排查

我正在学习使用AngularFirebase，遇到了上述类型错误，以下是相关代码和错误信息，希望能得到解决思路：

抽象服务类代码 #

@Injectable() 
export class AbstractService<T> { 
  constructor(
    private dbRef: AngularFireDatabase, 
    private afAuthRef: AngularFireAuth, 
    private dbFireStoreRef: AngularFirestore, 
    private storageRef: AngularFireStorage, 
    private message: MessageService
  ) { 
    this.dbRealTime = dbRef; 
    this.afAuth = afAuthRef; 
    this.dbFireStore = dbFireStoreRef; 
    this.storage = storageRef; 
  } 

  // 其他方法省略

  getAll(path: string): Observable<T[]> { 
    return this.dbRealTime.list(path).valueChanges(); 
  } 
}

书籍服务类代码 #

export class BooksService extends AbstractService<Book> { 
  addBook(book: Book) { 
    return new Promise( (resolve, reject) => { 
      this.dbRealTime.list(this.suffixes.books).push(book).then( 
        () => resolve(), 
        (error) => reject(error)
      ); 
    }); 
  } 

  getAllBooks(): Observable<Book[]> { 
    return this.getAll(this.suffixes.books); 
  } 
}

报错信息 #

ERROR in src/app/common/services/abstract.service.ts(59,5): error TS2322: Type 'Observable<{}[]>' is not assignable to type 'Observable<T[]>'. Type '{}[]' is not assignable to type 'T[]'. Type '{}' is not assignable to type 'T'.

我之前也踩过这个坑，问题出在AngularFire的list()方法默认不会自动推断泛型类型，它返回的是Observable<{}[]>，和你定义的Observable<T[]>类型不匹配。

解决方法很简单，直接给list方法指定泛型<T>，从源头明确数据类型：

getAll(path: string): Observable<T[]> { 
  return this.dbRealTime.list<T>(path).valueChanges(); 
}

这样valueChanges()就会返回Observable<T[]>，完全匹配你的方法返回类型，TypeScript的类型检查就不会再报错了。

如果你之前尝试过用as Observable<T[]>做类型断言，虽然能暂时屏蔽错误，但这种方式不如直接给list指定泛型规范——后者是让AngularFire明确知道要处理的是T类型数据，而不是强行转换类型。

内容的提问来源于stack exchange，提问作者Selast Lambou