15. 什么是映射类型？

目录一、 第一层通俗定义直击本质二、 第二层三大核心要素展现技术细节三、 第三层进阶变幻面试精彩加分点1. 修饰符的操作Add/Remove2. 键名重构Key Remapping—— TS 4.1 必考点3. 内置工具类型的基石四、 面试简答模板建议直接背诵回答思路简答模板 技术代码演示如果需要举例回答映射类型Mapped Types是展示你对 TypeScript“自动化编程”理解深度的核心话题。如果说条件类型是if-else那么映射类型就是类型空间里的for...in循环。以下是为你准备的递进式解析和面试模板一、 第一层通俗定义直击本质“映射类型是 TypeScript 中基于旧类型创建新类型的高效手段。它的语法类似于[K in keyof T]。它的核心作用是遍历循环一个已知类型的所有属性并对这些属性名或属性值进行统一的变换。这避免了手动定义大量相似接口的冗余工作。”二、 第二层三大核心要素展现技术细节面试时清晰地讲出这三个组成部分会显得很专业keyof操作符用于获取现有类型的所有属性键名。in关键字类似于 JS 的for...in用于遍历属性名。索引访问类型T[K]用于在映射过程中获取或转换属性值的类型。三、 第三层进阶变幻面试精彩加分点为了让回答更出彩必须提到映射过程中的**“修饰符”** 和**“重命名”** 1. 修饰符的操作Add/Remove通过或-符号我们可以动态地增加或删除属性的特性readonly让属性变为只读。?让属性变为可选。示例-readonly或-?用于还原被设置为只读或可选的属性。2. 键名重构Key Remapping—— TS 4.1 必考点使用as关键字我们可以在映射时修改属性的名字。应用配合模板字面量类型可以批量给属性名加前缀。例如将name映射为get_name。3. 内置工具类型的基石提到PartialT,ReadonlyT,RequiredT,PickT等官方工具类库它们的底层实现全部是映射类型。四、 面试简答模板建议直接背诵面试官什么是 TypeScript 中的映射类型回答模板“映射类型Mapped Types是 TS 中一种**‘以类型生成类型’** 的强大机制。简单来说它就像是类型空间里的Array.map。通过[K in keyof T]这种语法我们可以批量处理一个已有类型的所有属性将原始类型转化为一种全新的‘变体’。我在实际项目中主要利用它完成三件事实现属性特性的统一转换比如利用readonly或可选符号?快速生成对象的只读版本或可选版本。官方的Partial和Readonly就是最典型的例子。精准的数据结构同步比如我有一个 UI 配置对象我可以用映射类型生成一个与之完全对应的‘状态检查对象’确保每增加一个配置项对应的逻辑校验也不会遗漏。属性名重塑Key Remapping配合as关键字和模板字面量我可以批量修改属性名比如加上on前缀生成事件流类型。总之映射类型极大遵循了DRYDont Repeat Yourself原则。它让类型系统能够随着业务逻辑自动演进而不是靠程序员手动维护重复的 Interface从而显著提升了大型前端工程的可维护性。”回答思路遍历一个类型的 key重新构造新类型Partial等工具类型基础简答模板映射类型本质上是遍历一个类型的所有 key再根据这些 key 构造出一个新类型。比如把所有属性改成可选、只读等。Partial、Readonly这类工具类型本质上都是映射类型。 技术代码演示如果需要举例type User { id: number; name: string; }; // 1. 基础转换全部变为可选Partial 的简化版 type OptionalUser { [K in keyof User]?: User[K]; }; // 2. 进阶移除只读属性并给键名加前缀加分点 type NewUser { [K in keyof User as get_${string K}]: User[K]; }; /* 结果 { get_id: number; get_name: string; } */