面试题：TypeScript类型守卫在泛型函数参数检查中的深度应用

Question

编写一个泛型函数`filterArray`，它接收一个数组和一个类型守卫函数作为参数。类型守卫函数用于判断数组元素是否符合特定条件，`filterArray`函数需要利用这个类型守卫函数来过滤数组元素，并返回一个新的数组，且新数组的类型要根据类型守卫函数准确推导。请详细实现该泛型函数以及相应的类型守卫函数，并解释类型推导的过程。

Answer 1

// 类型守卫函数示例，判断是否为数字
function isNumber(value: any): value is number {
    return typeof value === 'number';
}

// 泛型函数filterArray
function filterArray<T>(array: T[], typeGuard: (value: any) => value is T): T[] {
    return array.filter(typeGuard);
}

// 使用示例
const mixedArray = [1, 'two', 3];
const numbers = filterArray(mixedArray, isNumber);
// 这里numbers的类型会被准确推导为number[]

类型推导过程解释

1. 类型守卫函数：isNumber函数是一个类型守卫，它接收一个any类型的值，并返回一个布尔值，同时通过value is number语法，告知TypeScript编译器，如果这个函数返回true，那么传入的值就是number类型。
2. 泛型函数filterArray：
   • 泛型参数T代表数组元素的类型。
   • array参数是一个类型为T[]的数组。
   • typeGuard参数是一个类型守卫函数，它接收任意类型的值，并返回这个值是否为T类型。
   • filterArray函数内部使用数组的filter方法，filter方法会对数组中的每个元素调用typeGuard函数，只有当typeGuard返回true时，该元素才会被保留在新数组中。由于typeGuard确保了返回为true时元素类型为T，所以最终返回的新数组类型就是T[]。在使用示例中，filterArray(mixedArray, isNumber)，T被推导为number，所以numbers的类型就是number[]。