面试题：TypeScript类型系统的深层次应用 - 实现复杂类型映射

Question

给定一个如下类型定义：type OriginalType = { a: string; b: number; c: boolean; }; 请编写一个类型映射，生成一个新类型，新类型的键为原类型键名前加上前缀'prefix_'，值类型为原类型值类型的数组。例如新类型应该是：type NewType = { prefix_a: string[]; prefix_b: number[]; prefix_c: boolean[]; }。要求使用TypeScript类型系统的高级特性如映射类型、条件类型等来完成，详细说明实现过程中每一步的思路。

Answer 1

1. 思路分析：
   • 首先，我们要使用映射类型来遍历OriginalType的每一个键。映射类型允许我们基于现有的类型创建新类型，通过对每个键进行操作来生成新的键值对。
   • 对于每个键，我们需要在其前面加上prefix_前缀。这可以通过字符串模板字面量类型来实现。
   • 对于值的类型，我们要将其变为数组类型。这可以通过在原类型的值类型后面加上[]来完成。
2. 代码实现：

type OriginalType = { a: string; b: number; c: boolean; };

type NewType = {
    [K in keyof OriginalType as `prefix_${K}`]: OriginalType[K][]
};

• [K in keyof OriginalType：这里使用映射类型，K会依次取OriginalType的每个键。keyof OriginalType会得到'a' | 'b' | 'c'。
• as prefix_${K}]：这是使用字符串模板字面量类型，将K前面加上prefix_前缀，生成新的键名。例如当K为'a'时，新键名为'prefix_a'。
• OriginalType[K][]：这里OriginalType[K]获取OriginalType中键K对应的值类型，然后[]将其变为数组类型。例如当K为'a'时，OriginalType['a']是string，OriginalType['a'][]就是string[]。

这样就实现了从OriginalType到NewType的转换。