Angular - TS 错误：需要参数声明

Question

I have a service file that is supposed to load cases from firebase database.

cases.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from "@angular/fire/database";
import { Observable, Subject, Subscription, timer } from 'rxjs';
import { tap, map } from 'rxjs/operators';
import { Case } from '../models/case.model';

@Injectable({
  providedIn: 'root'
})

export class CasesService {

  constructor(private db: AngularFireDatabase) { }

  getUserCases(uid: string) { 
    //@ts-ignore
    let initialPayload = this.db.list(`/cases/${uid}`).snapshotChanges().pipe(map(actions => actions.map(a => ({ key: a.payload.key, ...a.payload.val() }) ))) as Observable<any[]>;
    return initialPayload;
  }
  
// @ts-ignore
  createCase(case :Case) {
    //@ts-ignore
    let caseRef = this.db.database.ref(`/cases/${case.medicUid}`).push(); 
    //@ts-ignore
    let caseKey = caseRef.getKey();
    case.uid = casesKey; 
    return caseRef.update(case);
  }
}

cases.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../shared/services/auth.service';
import { CasesService } from '../shared/services/cases.service';
import { Case } from '../shared/models/case.model';

@Component({
  selector: 'app-cases',
  templateUrl: './cases.component.html',
  styleUrls: ['./cases.component.css']
})

export class CasesComponent implements OnInit {

  get userData() {
    return this.authService.userData;
  }
  get userExtras() {
    return this.authService.userExtras;
  }

  casesLoaded = false;
  //@ts-ignore
  cases: Case[];
  case: Case = { uid: '', name: '', details: '', date: '', filesUrls: [], medicUid: '', medicFname: '', medicLname: '' };

  constructor(
    private casesService: CasesService,
    public authService: AuthService
  ) {}

  ngOnInit(): void {
    this.getUserCases(this.userData.uid);
  }

  getUserCases = (uid: string) => {
    this.casesService.getUserCases(uid).subscribe((res) => {
      this.cases = res;
      this.casesLoaded = true;
    });
  }

//@ts-ignore
createCase(case: Case){
  //@ts-ignore
  this.casesService.createCase(case).then(res => {
    console.log('success creating the case')
    //@ts-ignore
  }).catch(error => {
    console.log(error);
  })
}

}

I am getting weird errors in the createCase method in both the component and the service file. Here are some screenshots:

createCase errors in component:

• (...) implicitly has any return type (this one can be solved with a //@ts-ignore, but the rest can't) https://imgur.com/YhPfMsv

• Parameter declaration expected https://imgur.com/yOC3cpC

• Expected '=' for property initializer https://imgur.com/wjELqRx

• Argument expression expected https://imgur.com/lZznbPr

The same errors appear for the createCase method inside the service file.

Note that no errors appear for the getUserCases method.

I had previously done a project where I used this exact same setup, and I had no errors there. Might be a package issue so will include my package.json:

package.json

{
 //...
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.0.3",
    "@angular/cdk": "^12.2.10",
    "@angular/common": "~12.0.3",
    "@angular/compiler": "~12.0.3",
    "@angular/core": "~12.0.3",
    "@angular/fire": "^6.1.5",
    "@angular/forms": "~12.0.3",
    "@angular/platform-browser": "~12.0.3",
    "@angular/platform-browser-dynamic": "~12.0.3",
    "@angular/router": "~12.0.3",
    "firebase": "^8.6.7",
    "primeflex": "^2.0.0",
    "primeicons": "^4.1.0",
    "primeng": "^12.2.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.1.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.0.3",
    "@angular/cli": "^12.1.3",
    "@angular/compiler-cli": "~12.0.3",
    "@types/jasmine": "~3.6.0",
    "@types/jest": "^26.0.23",
    "@types/mocha": "^8.2.2",
    "@types/node": "^12.20.15",
    "jasmine-core": "~3.7.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "typescript": "~4.2.3",
    "@angular-devkit/architect": ">= 0.900 < 0.1300",
    "firebase-tools": "^8.0.0 || ^9.0.0",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "open": "^7.0.3",
    "jsonc-parser": "^3.0.0"
  }
}

Answer 1

I can't believe that this is it, but the problem is that the case word is reserved in javascript. I can't use it for a normal variable naming, it expects certain actions.

Changed the variable name, all working smoothly.