Angular 8报错：类型'Object'不存在属性'message'问题咨询

嗨，我来帮你理清这个问题！首先得明白为什么启动项目就报错，然后给你几个靠谱的解决方案。

为什么启动时就检查response.message？ #

这是因为TypeScript是静态类型语言，它会在编译阶段（也就是你执行ng serve的时候）对所有代码做类型合法性检查，不管这段代码有没有被实际执行到。

你的this.http.post默认返回的是Object类型，而TypeScript知道Object类型里并没有message这个属性——哪怕你知道后端会返回这个字段，但编译器不知道啊！所以它会直接抛出错误，不会等你点击登录按钮触发请求的时候才检查。

解决方案 #

下面是几种可行的修复方式，按推荐程度排序：

1. 定义响应接口（最推荐） #

给后端返回的响应数据定义一个明确的接口，让TypeScript知道响应的结构：

// 先定义接口，放在服务或者单独的类型文件里都可以
interface AuthResponse {
  message: string;
  // 如果还有其他字段，比如token，也可以加在这里
}

// 然后在post请求时指定这个类型
login(userData: {email: string, password: string}) {
  this.http.post<AuthResponse>('http://localhost/apiapp/login.php', userData)
    .pipe(
      catchError( (errorRes) => {
        console.log(errorRes.url);
        console.log(errorRes.name);
        console.log(errorRes.message);
        return throwError(errorRes);
      })
    )
    .subscribe( (response) => {
      this.responseMsg.next(response.message);
      if (response.message === 'Logged in') {
        localStorage.setItem('isLoggedIn', '1');
        this.generalS.isAuthenticated.next(true);
      } else {
        this.generalS.isAuthenticated.next(false);
      }
    }, error => {
      // alert(error.message);
    });
}

这种方式能让你获得完整的类型提示和安全检查，是TypeScript的最佳实践。

2. 使用类型断言 #

如果你不想单独定义接口，可以在订阅时直接给response指定类型：

.subscribe(
  (response: { message: string }) => {
    this.responseMsg.next(response.message);
    // 后续逻辑不变
  },
  error => {
    // alert(error.message);
  }
)

或者用as关键字做断言：

.subscribe(
  (response) => {
    const authResponse = response as { message: string };
    this.responseMsg.next(authResponse.message);
    // 后续逻辑用authResponse代替response
  }
)

3. 使用any类型（不推荐） #

这种方式会跳过TypeScript的类型检查，虽然能快速解决报错，但会失去类型安全的优势：

this.http.post<any>('http://localhost/apiapp/login.php', userData)

除非是临时测试，否则不建议用这种方式。

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