Angular 12 - 错误：没有重载匹配此调用。重载 1 of 5答案

【问题标题】：Angular 12 - Error : No overload matches this call. Overload 1 of 5Angular 12 - 错误：没有重载匹配此调用。重载 1 of 5
【发布时间】：2021-09-09 10:41:12
【问题描述】：

以下是我的代码：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  isAuth$ = new BehaviorSubject<boolean>(false);
  token!: string ; 
  userId!: string;

  constructor(private router: Router,
    private http: HttpClient) { }


  createNewUser(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post(
        'http://localhost:3000/api/auth/signup',
        { email: email, password: password })
        .subscribe(
          () => {
            this.login(email, password).then(
              () => {
                resolve();
              }
            ).catch(
              (error) => {
                reject(error);
              }
            );
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

  login(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post(
        'http://localhost:3000/api/auth/login',
        { email: email, password: password })
        .subscribe(
          (authData: { token: string, userId: string }) => {  //====> Error 
            this.token = authData.token;
            this.userId = authData.userId;
            this.isAuth$.next(true);
            resolve();
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

  logout() {
    this.isAuth$.next(false);
    this.userId = null!;
    this.token = null!;
  }
}

错误描述：

没有重载匹配这个调用。重载 1 of 5, '(next: null, error: (error: any) => void, complete?: () => void): Subscription'，给出了以下错误。 '(authData: { token: string; userId: string;}) => void' 类型的参数不可分配给'null' 类型的参数。
重载 2 of 5, '(next?: (value: Object) => void, error?: (error: any) => void, complete?: () => void): Subscription'，给出了以下错误。 '(authData: { token: string; userId: string;}) => void' 类型的参数不可分配给 '(value: 对象）=> 无效'。参数“authData”和“value”的类型不兼容。 “对象”类型可分配给极少数其他类型。您的意思是改用“任何”类型吗？类型“对象”缺少类型“{ token: string; 中的以下属性；用户ID：字符串； }'：令牌，用户ID

The following is my code

Error description

【问题讨论】：

标签： angular typescript angular-httpclient angular12

【解决方案1】：

您必须为this.http.post 指定预期接收的响应数据类型。

方案一：指定为{ token: string, userId: string }类型

login(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post<{ token: string, userId: string }>(
        'http://localhost:3000/api/auth/login',
        { email: email, password: password })
        .subscribe(
          (authData: { token: string, userId: string }) => { 
            this.token = authData.token;
            this.userId = authData.userId;
            this.isAuth$.next(true);
            resolve();
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

方案二：指定为any类型

login(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post<any>(
        'http://localhost:3000/api/auth/login',
        { email: email, password: password })
        .subscribe(
          (authData: { token: string, userId: string }) => { 
            this.token = authData.token;
            this.userId = authData.userId;
            this.isAuth$.next(true);
            resolve();
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

【讨论】：

【解决方案2】：

您可以将this.http.post 函数的泛型类型更改为{ token: string, userId: string }，如下所示：

this.http.post<{ token: string, userId: string }>(......);

但是，我认为在您的情况下，最好直接使用 Observable 而不使用 promise，并且在您的函数中不订阅。

您可以通过以下方式实现：

  login(email: string, password: string): Observable<void> {
    return this.http
      .post<{ token: string; userId: string }>(
        "http://localhost:3000/api/auth/login",
        {
          email: email,
          password: password,
        }
      )
      .pipe(
        map((authData) => {
          this.token = authData.token;
          this.userId = authData.userId;
          this.isAuth$.next(true);
        })
      );
  }

【讨论】：