面试题：TypeScript函数返回值类型推断与泛型及条件类型的结合运用

Question

实现一个泛型函数 `processArray`，该函数接受一个数组 `arr` 和一个回调函数 `callback`。`callback` 接受数组元素类型作为参数并返回一个布尔值。`processArray` 函数需要根据 `callback` 对数组每个元素的处理结果，返回一个新的数组。如果所有元素通过 `callback` 检查，则新数组元素类型为原数组元素类型的大写形式（假设存在 `toUpperCase` 方法）；否则新数组元素类型为 `string`。请详细说明函数返回值类型推断过程中泛型和条件类型是如何协同工作的。

Answer 1

function processArray<T>(arr: T[], callback: (element: T) => boolean): (string | Uppercase<string & T>)[] {
    const allPass = arr.every(callback);
    if (allPass) {
        return arr.map((element) => (element as unknown as string).toUpperCase()) as (Uppercase<string & T>)[];
    } else {
        return arr.map((element) => element.toString()) as string[];
    }
}

泛型和条件类型协同工作的分析

1. 泛型 T：函数 processArray 定义了一个泛型 T，它代表数组 arr 中元素的类型。这样函数就可以处理任意类型的数组。

2. 条件类型：函数返回值类型为 (string | Uppercase<string & T>)[]。这里的条件逻辑在于 arr.every(callback) 的结果。

   • 如果 allPass 为 true，即所有元素通过 callback 检查，那么返回值类型应该是原数组元素类型的大写形式。这里使用 Uppercase<string & T>，string & T 确保 T 类型是可转换为字符串的（假设存在 toUpperCase 方法），然后 Uppercase 将其转换为大写形式。通过 map 方法，将原数组每个元素转换为大写形式并返回，使用类型断言 as (Uppercase<string & T>)[] 确保返回类型正确。
   • 如果 allPass 为 false，即存在元素未通过 callback 检查，返回值类型为 string[]。通过 map 方法将原数组每个元素转换为字符串形式并返回，使用类型断言 as string[] 确保返回类型正确。

   整个过程中，泛型 T 提供了对不同数组元素类型的抽象，而条件类型根据 callback 的检查结果来决定最终返回数组元素的具体类型，二者协同工作使得函数具有通用性和灵活性。