Typescript Error Type 'AngularFireList<ProfileResto>' is not assignable to type 'AngularFireList<ProfileResto[]>'

Question

Background

I am using ionic 4 + angularfire + firebase to make this app. The details of package.json is provided below.

Problem

Actually I have so many errors when I run ionic serve. But it is weird because this error only happens once after I run ionic serve. When I re-save the file find-resto.ts (without any changes) the problem dissapears!!!

It starts bothering me because it throws error in ionic pro and Ionic DevApp.

Here are the errors:

1. Typescript Error Type 'AngularFireList<ProfileResto>' is not assignable to type 'AngularFireList<ProfileResto[]>'. (line 29)
 2. Typescript Error Type 'AngularFireList<ProfileResto>' is not assignable to type 'AngularFireList<ProfileResto[]>'. Type 'ProfileResto' is not assignable to type 'ProfileResto[]'. Property 'length' is missing in type 'ProfileResto' (line 29)
 3. Typescript Error Type 'Observable<AngularFireAction<DatabaseSnapshot<ProfileResto[]>>[]>' is not assignable to type 'AngularFireList<ProfileResto[]>'. (line 30)
 4. Typescript Error Type 'Observable<AngularFireAction<DatabaseSnapshot<ProfileResto[]>>[]>' is not assignable to type 'AngularFireList<ProfileResto[]>'. Property 'query' is missing in type 'Observable<AngularFireAction<DatabaseSnapshot<ProfileResto[]>>[]>'. (line 30)
 5. Typescript Error Type 'AngularFireList<ProfileResto>' is not assignable to type 'AngularFireList<ProfileResto[]>'. (line 33)
 6. Typescript Error Type 'Observable<AngularFireAction<DatabaseSnapshot<ProfileResto[]>>[]>' is not assignable to type 'AngularFireList<ProfileResto[]>'. 
 7. Typescript Error Cannot find name 'RestoProfile'. (line39)

My Code

Here is my file find-resto.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database';

import { ProfileResto } from './../../models/profile-resto';

import { OrderMenuPage } from '../order-menu/order-menu';

@IonicPage()
@Component({
  selector: 'page-find-resto',
  templateUrl: 'find-resto.html',
})
export class FindRestoPage {

  restoProfileRef: AngularFireList<ProfileResto[]>;
  restoProfileData: AngularFireList<ProfileResto[]>;

  constructor(private afAuth: AngularFireAuth, private afDatabase: AngularFireDatabase,
    private toast: ToastController,
    public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.restoProfileRef = this.afDatabase.list<ProfileResto>(`profile-resto/`);
        this.restoProfileData = this.restoProfileRef.snapshotChanges();
      }
      else {
        this.restoProfileRef = this.afDatabase.list<ProfileResto>(`profile-resto/`);
        this.restoProfileData = this.restoProfileRef.snapshotChanges();
      }
    });
  }

  selectResto(restoProfile: RestoProfile){
    this.afAuth.authState.subscribe(data => {
      if(data && data.email && data.uid){
        this.navCtrl.push('OrderMenuPage', {
          restoDataPass: restoProfile
        });
        console.log(restoProfile)
      }
      else {
        this.toast.create({
          message: `Harap masuk/daftar terlebih dahulu`,
          duration: 3000
        }).present();
      }
    });
  }
}

Here is my package.json file

{
  "name": "menuu",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint"
  },
  "dependencies": {
    "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/fire": "^5.0.2",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.15.0",
    "@ionic-native/splash-screen": "~4.15.0",
    "@ionic-native/status-bar": "~4.15.0",
    "@ionic/pro": "2.0.3",
    "@ionic/storage": "2.2.0",
    "firebase": "^5.5.4",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.3.3",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.2.0",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

Any help would be appreciated. Thank you.

Answer 1

Just follow the error messages to see what needs to be changed. this.afDatabase.list(profile-resto/) is returning an AngularFireList<ProfileResto>, so that should be the type of restoProfileRef. (AngularFireList<ProfileResto[]> would be a list of arrays.) Likewise, once you fix that, you'll see that restoProfileData needs to be of type Observable<AngularFireAction<DatabaseSnapshot<ProfileResto>>[]>. Re Cannot find name 'RestoProfile', I assume you meant ProfileResto?

Re the disappearing errors, I've seen a few reports of that on Stack Overflow, but I don't know the involved systems well enough for it to be worthwhile for me to try to investigate the phenomenon.