TypeScript中使用Array.filter过滤复杂对象数组的解决方法

核心问题原因 #

• TypeScript 是强类型语言，未给数组声明元素类型时，编译器无法识别回调参数x上存在Name属性，因此抛出类型错误
• 你用到的contains方法属于非标准字符串方法，标准 ES6+ 中判断字符串包含关系请使用includes方法，避免跨环境运行异常
• 你提供的示例数组中Marx的Math属性存在语法错误，漏写了属性名的闭合引号，需要先修正

具体实现方案 #

方案1：标准写法（推荐） #

先定义学生数据的类型接口，再给数组声明类型：

// 定义学生数据类型
interface Student {
  Name: string;
  Math: number;
  English: number;
}

// 给数组指定类型，同时修正原数组的语法错误
const arrStudents: Student[] = [
  {"Name":"John","Math":90,"English":80},
  {"Name":"Johnson","Math":85,"English":95},
  {"Name":"Mary","Math":70,"English":78},
  {"Name":"Maria","Math":83,"English":88},
  {"Name":"Peter","Math":86,"English":79},
  {"Name":"Marx","Math":79,"English":62}
];

// 筛选逻辑
const arrResult = arrStudents.filter(x => x.Name.includes('Ma'));

方案2：临时快速处理 #

如果是临时调试不想定义类型，可以直接用类型断言指定数组元素类型：

const arrResult = (arrStudents as Array<{Name: string, Math: number, English: number}>)
  .filter(x => x.Name.includes('Ma'));

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