TS7053错误：Observable订阅后无法读取对象page属性下的totalPages

这个TS7053错误的本质是TypeScript无法识别接口返回的data变量的类型，默认将其推导为无任意索引签名的Object类型，因此不允许直接使用page字段做索引访问，无论是data["page"]还是data.page写法都会触发类型校验失败。

方案1：显式定义响应类型（推荐，符合TS类型规范） #

首先根据你的接口返回结构定义对应TS类型：

// 定义page字段的结构类型
interface PageMeta {
  size: number;
  totalElements: number;
  totalPages: number;
  number: number;
}

// 定义完整的接口返回结构类型
interface ProductListResponse {
  _embedded: Record<string, any>; // 若用到_embedded内的字段可进一步细化类型
  _links: Record<string, any>;
  page: PageMeta;
}

然后调整你服务中getProductByKeyWord方法的返回值类型，给HTTP请求添加泛型约束（以Angular HttpClient为例）：

// catServ服务内的方法调整
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

// ...
getProductByKeyWord(keyword: string, page: number, size: number): Observable<ProductListResponse> {
  return this.http.get<ProductListResponse>('你的接口请求地址', {
    params: {
      keyword,
      page,
      size
    }
  })
}

调整后订阅时data会自动被TS识别为ProductListResponse类型，直接访问data.page.totalPages即可正常编译。

方案2：临时类型断言（适合快速调试场景） #

如果暂时不需要完整的类型定义，可以通过类型断言绕开校验，两种写法可选：
写法A：直接给data声明为any类型

getProducts() {
  this.catServ.getProductByKeyWord(this.currentkeyword,this.currentPage, this.size)
    .subscribe((data: any)=>{
      this.totalPages = data.page.totalPages;
    },err=>{
      console.log(err);
    })  
}

写法B：访问时做类型断言

getProducts() {
  this.catServ.getProductByKeyWord(this.currentkeyword,this.currentPage, this.size)
    .subscribe(data=>{
      this.totalPages = (data as {page: {totalPages: number}}).page.totalPages;
    },err=>{
      console.log(err);
    })  
}

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