Angular 12报错：No overload matches this call（调用无匹配重载）

Hey there! Let's tackle that frustrating error in your AuthService. The root cause is TypeScript type mismatches with Angular's HttpClient—here's a breakdown of the problem and step-by-step fixes:

Why the Error Happens #

Angular's HttpClient.post() method defaults to inferring the response type as Object when you don't explicitly specify it. In your login method, you've annotated the authData parameter in the subscribe callback as { token: string; userId: string; }, but TypeScript can't confirm that the generic Object returned by post() has those properties. That's why you get the "types are incompatible" error.

Solution 1: Explicitly Define the Response Type with Generics (Recommended) #

The cleanest way to fix this is to tell HttpClient.post() exactly what type of data it should expect in the response. You can do this by adding a generic type to the post call:

First, define a reusable interface for your auth response (optional but makes code cleaner):

interface AuthResponse {
  token: string;
  userId: string;
}

Then update your login method's http.post call to use this type:

login(email: string, password: string) {
  return new Promise<void>((resolve, reject) => {
    this.http.post<AuthResponse>( // Add the generic type here
      'http://localhost:3000/api/auth/login',
      { email: email, password: password }
    ).subscribe(
      (authData) => { // No need to re-annotate the type now—TypeScript infers it
        this.token = authData.token;
        this.userId = authData.userId;
        this.isAuth$.next(true);
        resolve();
      },
      (error) => {
        reject(error);
      }
    );
  });
}

You can apply the same fix to your createNewUser method if you expect a similar response (though right now you're not using the response there, but it's good practice).

Solution 2: Use Type Assertion (Quick Fix) #

If you prefer not to use generics, you can use a type assertion to tell TypeScript that the response matches your expected structure. Note that this skips compile-time type checking, so it's less safe than the generic approach:

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: any) => { // Use 'any' first, then assert the type
        const typedAuthData = authData as { token: string; userId: string };
        this.token = typedAuthData.token;
        this.userId = typedAuthData.userId;
        this.isAuth$.next(true);
        resolve();
      },
      (error) => {
        reject(error);
      }
    );
  });
}

Bonus: Minor Optimization for Logout #

Quick note on your logout method: you're using non-null assertions (!) for userId and token, but then assigning null to them. This could lead to unexpected issues later. Consider updating the property types to allow null:

token: string | null = null;
userId: string | null = null;

// Then in logout:
logout() {
  this.isAuth$.next(false);
  this.userId = null;
  this.token = null;
}

This removes the need for the non-null assertion operator and keeps your types accurate.

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