复用baseResponseInterface时Angular模板访问response?.docs报错求助

你当前的联合类型实现方案语法上可行，但在Angular模板中会因TypeScript类型推断限制报错——联合类型ResponseInterface的docs字段是User[] | Hospital[]的联合类型，Angular模板无法确定你要遍历的具体类型，因此抛出类型错误。

最优解决方案：使用泛型接口复用基础结构 #

不需要为每种响应单独编写重复接口，用泛型可完美复用分页字段，同时明确docs的具体类型：

1. 修改response.interface.ts，定义带泛型的基础响应接口：

export interface BaseResponse<T> {
    totalPages: number,
    page: number,
    hasNextPage: boolean,
    hasPrevPage: boolean,
    nextPage: number | null,
    prevPage: number | null,
    limit: number,
    pagingCounter: number,
    totalDocs: number,
    docs: T[]
}

// 基于泛型快速定义具体响应类型
export type UserResponse = BaseResponse<User>;
export type HospitalResponse = BaseResponse<Hospital>;

2. 在组件中根据业务场景声明对应类型的变量：

// 处理用户列表请求时使用
public userResponse: UserResponse | undefined;

// 处理医院列表请求时使用
public hospitalResponse: HospitalResponse | undefined;

3. 模板中直接使用对应变量，类型会被正确推断：

<!-- 用户列表渲染 -->
<tr *ngFor="let user of userResponse?.docs; let index = index">
  <!-- 用户相关DOM渲染逻辑 -->
</tr>

<!-- 医院列表渲染 -->
<tr *ngFor="let hospital of hospitalResponse?.docs; let index = index">
  <!-- 医院相关DOM渲染逻辑 -->
</tr>

若必须使用单一联合类型变量：添加类型守卫 #

如果业务场景需要用同一个变量处理不同类型响应，需给TypeScript添加类型守卫，明确当前响应的具体类型：

1. 在组件中添加类型判断方法：

isUserResponse(res: BaseResponse<any>): res is UserResponse {
  // 根据实际业务字段区分，比如User有`userId`字段、Hospital有`hospitalId`
  return !!(res.docs[0] as User)?.userId;
}

isHospitalResponse(res: BaseResponse<any>): res is HospitalResponse {
  return !!(res.docs[0] as Hospital)?.hospitalId;
}

2. 模板中通过*ngIf配合类型守卫明确类型：

<ng-container *ngIf="response && isUserResponse(response)">
  <tr *ngFor="let user of response.docs; let index = index">
    <!-- 用户列表逻辑 -->
  </tr>
</ng-container>

<ng-container *ngIf="response && isHospitalResponse(response)">
  <tr *ngFor="let hospital of response.docs; let index = index">
    <!-- 医院列表逻辑 -->
  </tr>
</ng-container>

总结 #

你的复用思路是正确的，但联合类型不适合直接在Angular模板中使用。泛型接口是最简洁且类型安全的方案，既复用了基础分页字段，又能让TypeScript正确推断docs类型，避免模板报错。

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