面试题：TypeScript 泛型与复杂类型约束

Question

定义一个泛型函数 `filterArray`，它接收一个数组和一个过滤函数作为参数。过滤函数接受数组元素类型作为参数，并返回一个布尔值，表示该元素是否应该被保留。要求使用 TypeScript 类型系统确保过滤函数的参数类型与数组元素类型匹配，并且正确处理联合类型和交叉类型的情况。描述可能遇到的类型陷阱以及如何利用 TypeScript 的类型特性来避免这些问题。

Answer 1

function filterArray<T>(array: T[], callback: (element: T) => boolean): T[] {
    return array.filter(callback);
}

类型陷阱及避免方法

1. 联合类型陷阱：当数组元素是联合类型时，例如 (string | number)[]，过滤函数的参数类型为 string | number。在过滤函数内部操作元素时，可能会因为类型不明确而导致错误。比如在 (element: string | number) => { return element.length } 中，number 类型没有 length 属性。
   • 避免方法：利用类型保护，如 typeof 或自定义类型保护函数。例如：

function isString(value: string | number): value is string {
    return typeof value ==='string';
}
function filterArrayWithUnion<T extends string | number>(array: T[], callback: (element: T) => boolean): T[] {
    return array.filter((element) => {
        if (isString(element)) {
            return callback(element);
        }
        return false;
    });
}

2. 交叉类型陷阱：如果数组元素是交叉类型，例如 { name: string } & { age: number }，过滤函数需处理这个复杂类型。陷阱在于可能忽略某些属性的使用。比如 (element: { name: string } & { age: number }) => { return element.gender }，gender 并不是交叉类型中的属性。
   • 避免方法：仔细检查交叉类型包含的所有属性，并确保在过滤函数中只使用这些属性。可以在类型定义时明确交叉类型的所有属性，避免意外使用不存在的属性。