面试题：TypeScript 基本类型在复杂泛型中的深度应用

Question

实现一个泛型函数 `transformArray`，它接受一个数组作为参数，数组元素的类型可以是 `number`、`string` 或 `boolean` 中的任意一种。该函数需要根据数组元素的类型，对每个元素进行不同的转换操作：`number` 类型元素翻倍，`string` 类型元素全部转为大写，`boolean` 类型元素取反。同时，该函数返回的数组类型应与传入数组的元素类型保持一致。请使用 TypeScript 严格的类型定义完成此函数，并解释你在泛型设计中如何处理不同基本类型的转换逻辑。

Answer 1

function transformArray<T extends number | string | boolean>(arr: T[]): T[] {
    return arr.map((element) => {
        if (typeof element === 'number') {
            return element * 2 as unknown as T;
        } else if (typeof element ==='string') {
            return element.toUpperCase() as unknown as T;
        } else {
            return!element as unknown as T;
        }
    });
}

泛型设计中处理不同基本类型转换逻辑的解释

1. 泛型类型参数定义：使用 T extends number | string | boolean 来定义泛型 T，这确保了 T 只能是 number、string 或 boolean 这三种基本类型之一。
2. map 方法遍历数组：使用 map 方法遍历传入的数组 arr，对每个元素进行转换。
3. 类型判断与转换：
   • number 类型：通过 typeof element === 'number' 判断元素类型为 number，然后将其翻倍 element * 2。由于类型断言 as T 会导致类型检查器信任我们的类型转换，但 number 翻倍后仍然是 number，所以这里使用 as unknown as T 先将其转为 unknown 类型（消除类型断言可能带来的风险），再转为 T 类型。
   • string 类型：通过 typeof element ==='string' 判断元素类型为 string，然后使用 toUpperCase 方法将其转为大写。同样使用 as unknown as T 来进行类型转换。
   • boolean 类型：通过排除前两种类型，剩下的就是 boolean 类型，对其取反 !element，并使用 as unknown as T 进行类型转换。
4. 返回转换后的数组：map 方法返回一个新数组，该数组的元素类型已经根据上述转换逻辑进行了相应转换，并且整体返回类型与传入数组的元素类型保持一致。