Angular 13表格过滤器实现遇TS(7053)错误，求解决方法

这个错误源于 TypeScript 严格类型检查规则：用字符串索引 Object 类型时，该类型未定义对应的字符串索引签名，导致类型推断异常。以下是几种可行的解决方式：

1. 定义明确的数据接口（推荐） #

给表格数据定义具体接口，明确字段类型或通用索引签名，让 TypeScript 清晰识别数据结构：

// 根据实际业务字段调整，这里是通用示例
interface TableRow {
  [key: string]: string | number | boolean; // 适配任意字段的索引签名
  // 也可指定具体字段：name: string; age: number; status: boolean;
}

@Pipe({ name: 'tableFilter' })
export class TableFilterPipe implements PipeTransform {
  transform(items: TableRow[], filter: any): TableRow[] {
    if (!items || !filter) return items;
    
    // 过滤逻辑示例
    return items.filter(item => {
      return Object.keys(filter).every(key => {
        return item[key]?.toString().toLowerCase().includes(filter[key].toLowerCase());
      });
    });
  }
}

2. 直接使用带索引签名的类型 #

如果不想单独定义接口，可在 Pipe 的 transform 方法中，用带字符串索引的类型替代 Object：

transform(items: { [key: string]: any }[], filter: any): { [key: string]: any }[] {
  // 你的过滤逻辑代码
}

3. 局部类型断言（临时修复） #

在需要索引的位置，通过类型断言告知 TypeScript 当前对象支持字符串索引：

return items.filter(item => {
  return Object.keys(filter).every(key => {
    // 断言 item 为带字符串索引的类型
    const itemValue = (item as { [key: string]: any })[key];
    return itemValue?.toString().toLowerCase().includes(filter[key].toLowerCase());
  });
});

注意：类型断言仅绕过 TypeScript 类型检查，不会改变运行时类型，仅适合临时场景，优先选择前两种类型安全的方案。

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