Свойство 'status' не существует для типа 'User'

Question

Я работаю над личным проектом с Angular 6 в качестве моего клиента и Laravel 5.6 в качестве моего API, и я не могу понять, что происходит с моей службой аутентификации.

Для некоторого контекста: я хотел бы реализовать jwtAuth для управления моей аутентификацией пользователя, и она работает отлично (я тестировал конечные точки API с помощью Postman). Теперь это моя функция регистрации:

public function register(RegisterFormRequest $request)
    {
        $user = new User;
        $user->username = $request->username;
        $user->email = $request->email;
        $user->password = bcrypt($request->password);
        $user->save();

        return response()->json([
            'status' => 'success',
            'message' => '¡Usuario registrado!',
            'user' => $user
        ], 200);
    }

Как видите, эта функция возвращает json со статусом, сообщением и информацией о пользователе. На стороне клиента это моя auth.service.ts функция «зарегистрировать пользователя»:

registerUser(user: User):Observable<User> {
    return this.http.post<User>(`${this.url}/register`, user, httpOptions)
      .pipe(
        catchError((e:Response) => throwError(e))
      );
  }

Который возвращает тот же самый json, который я определил в своем API, если все пойдет хорошо. Наконец, в моем register.component.ts это функция, которую я использую для реализации этой сервисной функции:

onSubmit() {
    this.authService.registerUser(this.user).subscribe(
      response => {
        swal({
          type: response.status,
          text: response.message,
          footer: 'Usted será redirigido hacia el formulario de ingreso.',
          showConfirmButton: false,
          showCloseButton: false,
          showCancelButton: false,
          allowEscapeKey: false,
          allowOutsideClick: false,
        });
      }
    );
  }

Просто так, он не работает, потому что выдает следующую ошибку:

Property 'status' does not exist on type 'User'.

Кстати, вот мой user класс:

export class User {
  id: number;
  username: string;
  email: string;
  password: string;
  password_confirmation: string;
}

И я предполагаю, что он будет делать то же самое с response.message, и я думаю, что он связан с обработчиком Observable, но я не могу понять, как он работает. Если я уберу их в строки кода, все будет работать так ... Как я могу решить эту проблему?

PD: Извините за мой плохой английский!

Answer 1

Вы должны добавить статус к вашему типу пользователя:

export class User {
  id: number;
  username: string;
  email: string;
  password: string;
  password_confirmation: string;
  status: string;
}

в противном случае вы можете просто вернуть Observable из вашего сервиса.

registerUser(user: User):Observable<Any> {
    return this.http.post<Any>(`${this.url}/register`, user, httpOptions)
      .pipe(
        catchError((e:Response) => throwError(e))
    );
}

Answer 2

Вы передаете свой ответ пользователю, когда он фактически является типом ответа, который вы создали для вашего API:

}
  status: string
  message: string
  user: User
}

Итак, если вас не волнуют поля статуса или поля сообщений, просто сопоставьте ответ, чтобы просто вернуть пользователя.

//Create a response type or interface or class
export interface RegisterUserResponse {
  status: string
  message: string
  user: User
}



registerUser(user: User):Observable<User> {
    return this.http.post<User>(`${this.url}/register`, user, httpOptions)
      .pipe(
        catchError((e:Response) => throwError(e)),
        map((resp: RegisterUserResponse) => {
          return resp.user; //this should satisfy 'this.http.post<User>'
        })
      );
}

Answer 3

Это потому, что ваша функция registerUser возвращает наблюдаемое типа User:

registerUser(user: User):Observable<User>

и когда вы его называете:

registerUser(this.user).subscribe(
  response => {
    swal({
      type: response.status,

response должен иметь тип User (потому что вы его указали), поэтому измените тип возврата на Angular http response или любой другой, и тогда ответ сможет иметь свойство status:)