TS 开发经验分享: 使用 Array.prototype.filter 遇到的问题与思考

在 TypeScript 中使用 Array.prototype.filter 方法时，可能会遇到类型相关的问题。例如，你可能有一个包含不同类型对象的数组，你想要过滤出特定类型的对象。如果不正确地使用泛型，可能会遇到类型推断错误或者不符合预期的行为。

以下是一个使用 Array.prototype.filter 方法时可能遇到问题的示例，以及相应的解决方案：

问题示例：

interface A {
  type: 'A';
  // 其他属性
}
 
interface B {
  type: 'B';
  // 其他属性
}
 
const items: (A | B)[] = [
  { type: 'A', /* ... */ },
  { type: 'B', /* ... */ },
  // 更多对象
];
 
// 错误使用 filter，没有提供正确的类型参数
const result = items.filter(item => item.type === 'A');
// Type '(A | B)[]' is not assignable to type 'A[]'.
// Type 'B' is not assignable to type 'A'.

解决方案：

// 使用 as assertion 明确指定期望的类型
const result = items.filter(item => item.type === 'A') as A[];
 
// 或者使用泛型函数来精确地类型过滤
function filterByType<T>(arr: (A | B)[], type: T['type']): T[] {
  return arr.filter(item => item.type === type) as T[];
}
 
const resultWithGeneric = filterByType<A>(items, 'A');

在这个解决方案中，我们使用了 TypeScript 的泛型来创建一个可以过滤出特定类型对象的函数。这样，我们可以在调用时指定期望的类型，从而避免类型错误。同时，我们也可以使用类型断言来强制转换结果为我们期望的类型，但这种方法通常需要你确定转换的准确性。在实际应用中，泛型函数更加灵活和可靠。