如何解决含索引签名接口与已定义属性类型不兼容的TS错误？

问题背景 #

你遇到的TypeScript类型错误，源于当前定义的ApiResponseItem过于宽泛，无法让TypeScript识别出item.attrs在isDog为true时符合Dog类型。以下是几种更简洁的解决方式：

方案1：优化API响应的类型定义（推荐） #

放弃宽泛的索引签名，定义更贴合实际返回结构的类型，利用TypeScript的类型收缩特性：

// 明确Dog类型
interface Dog {
  name: string;
  // 其他Dog专属属性
}

interface Cat {
  name: string;
  // 其他Cat专属属性
}

// 定义集合项的精确类型
interface PetCollectionItem {
  isDog: boolean;
  attrs: Dog | Cat;
}

// 更新API响应接口
export interface ApiResponse {
  collection: PetCollectionItem[];
}

此时模板中无需额外转换，TypeScript会自动识别：

<ul>
<li *ngFor="let item of apiResponse.collection">
  <woofer [dog]="item.attrs" *ngIf="item.isDog">
  ...

当item.isDog为true时，TypeScript会自动将item.attrs收缩为Dog类型，不会再抛出错误。

方案2：模板内直接使用类型断言 #

如果暂时不想修改接口定义，可以直接在模板中做类型断言，省去额外的组件方法：

<ul>
<li *ngFor="let item of apiResponse.collection">
  <woofer [dog]="item.attrs as Dog" *ngIf="item.isDog">
  ...

方案3：使用类型守卫函数（兼顾类型安全与运行时验证） #

如果需要同时保证类型安全和运行时数据有效性，可以编写一个类型守卫函数：

// 类型守卫函数，同时做类型收缩和运行时验证
function isDogItem(item: ApiResponseItem): item is { isDog: true, attrs: Dog } {
  const candidate = item as { isDog?: boolean, attrs?: { name?: string } };
  return candidate.isDog === true && typeof candidate.attrs?.name === 'string';
}

然后在模板中使用这个函数：

<ul>
<li *ngFor="let item of apiResponse.collection">
  <woofer [dog]="item.attrs" *ngIf="isDogItem(item)">
  ...

这种方式不仅能消除TypeScript错误，还能在运行时过滤掉不符合Dog格式的数据，避免潜在的bug。

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