ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

TypeScript Mapped Types 完全指南:用 keyof 与映射语法从既有类型派生新类型(typescript-book 实战解读)

TypeScript Mapped Types 完全指南:用 keyof 与映射语法从既有类型派生新类型(typescript-book 实战解读) 文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载导读本文以《The Concise TypeScript Book》开源仓库中 印尼语版 mapped-types 章节 为骨架系统讲解 TypeScript Mapped Types映射类型的完整语法体系从keyof属性遍历、T[P]索引访问、readonly/?修饰符到键重映射as子句与条件类型、模板联合类型的组合运用。读完本文你将掌握如何用映射类型把信息相同、形态不同的类型变换逻辑固化进类型系统并能自行实现Readonly、Partial这类内置工具类型的底层原理。一、什么是 Mapped Type以类型变换类型Mapped Type 是 TypeScript 中一类基于既有类型创建新类型的语法结构。它的核心思想是不手工重写每个属性而是通过一个映射函数遍历既有类型的每一个属性逐一变换后生成新类型。映射既有类型就能创建出表达相同信息、但采用不同格式的全新类型。要创建一个映射类型需要两步使用keyof操作符取出既有类型的所有属性键对每个键P通过索引访问T[P]取回原属性类型再对其进行变换。这一节对应 英文原版 mapped-types.md 与 印尼语版 mapped-types.md 开篇的定义两者表述一致mapped type 通过映射函数变换既有类型的每个属性。二、第一个映射类型让每个属性变成数组原文档给出了一个完整可运行的最小示例此处原样继承并逐行拆解type MyMappedTypeT { [P in keyof T]: T[P][]; }; type MyType { foo: string; bar: number; }; type MyNewType MyMappedTypeMyType; const x: MyNewType { foo: [hello, world], bar: [1, 2, 3], };逐行解读[P in keyof T]keyof T返回MyType的属性键联合类型foo | barP in ...表示对每个键进行一次映射迭代P在此充当类型层面的循环变量T[P][]T[P]是索引访问indexed access取回string与number追加[]后得到string[]与number[]因此MyNewType展开后等价于{ foo: string[]; bar: number[]; }与MyType表达的信息相同只是每个属性的形态从标量变成了数组赋值时foo: [hello, world]、bar: [1, 2, 3]与映射结果完全吻合类型检查通过。这个例子的价值在于展示了映射类型的三个基本构件——键遍历P in keyof T、属性类型访问T[P]、属性类型变换[]。它们是后续所有高级用法的地基。三、底层构件keyof、索引签名与索引访问要真正理解映射类型需要先厘清它依赖的两个相邻特性。仓库中 index-signatures.md 说明了索引签名可用string、number、symbol三种键类型type-indexing.md 则演示了用索引签名定义键未知的类型type DictionaryT { [key: string]: T; }; const myDict: Dictionarystring { a: a, b: b }; console.log(myDict[a]); // Returns a映射类型的[P in keyof T]与索引签名语法上相似都使用方括号但语义不同索引签名声明未知键的值类型映射类型则声明对既有类型每个已知键的逐个变换。keyof负责把键集合取出来而T[P]负责按索引取回属性类型二者组合构成了映射的遍历 取值机制。在 type-manipulation.md 的 Indexed Access Types 一节中也可以看到这种索引访问的独立用法type Person { name: string; age: number; }; type AgeType Person[age]; // number四、映射类型修饰符readonly、readonly、-readonly 与 ?映射类型的威力在于可以对每个属性施加修饰符从而批量改变属性的可变性。仓库 mapped-type-modifiers.md含 印尼语版列出了三种核心修饰符readonly或显式写readonly把映射结果中的每个属性标记为只读-readonly去掉只读标记让每个属性恢复可变mutable?把每个属性标记为可选optional。原文档示例type ReadOnlyT { readonly [P in keyof T]: T[P] }; // All properties marked as read-only type MutableT { -readonly [P in keyof T]: T[P] }; // All properties marked as mutable type MyPartialT { [P in keyof T]?: T[P] }; // All properties marked as optional三个工具类型对应三种常见批量操作工具类型语法效果ReadOnlyT{ readonly [P in keyof T]: T[P] }所有属性变为只读MutableT{ -readonly [P in keyof T]: T[P] }移除只读标记属性可变MyPartialT{ [P in keyof T]?: T[P] }所有属性变为可选这里体现了修饰符的加减法规则前缀表示加上该修饰符readonly与?均可加-前缀表示移除该修饰符-readonly、-?。readonly不带符号时等价于readonly?同理等价于?。由于修饰符可加可减映射类型不仅能变严格还能变宽松——比如把一个来自Readonly类型或as const对象的结果重新变回可写。五、键重映射用 as 子句 模板字面量改写键名除变换属性值类型与修饰符外TypeScript 4.1 起映射类型支持对键本身进行重命名。语法是在in子句后追加as配合模板字面量类型template literal types生成新键名。仓库 exploring-the-type-system.md 的 Type Assertion 一节给出了如下示例type JType { [Property in keyof Type as prefix_${string Property}]: () Type[Property]; }; type X { a: string; b: number; }; type Y JX;解读as \prefix_${string Property}把键a、b重映射为prefix_a、prefix_bstring Property是模板字面量类型的约束写法——模板插值要求类型可序列化为字符串将Property与string取交集可让编译器确信键名是字符串类型值类型() Type[Property]新属性的值是从原属性类型派生的函数类型。展开后Y等价于{ prefix_a: () string; prefix_b: () number; }。键重映射最常见的场景是给一组字段统一加前缀/后缀、把键转换为getXxx/setXxx形式的访问器名、或配合条件类型在映射中过滤掉某些键当as结果为never时该键被剔除。六、与其他类型操作组合条件类型与模板联合类型映射类型不是孤立特性它与条件类型、模板联合类型组合后能表达相当复杂的类型变换逻辑。组合条件类型做键过滤。仓库 conditional-types.md 展示了条件类型的基础形态type IsArrayT T extends any[] ? true : false;把extends三元判断放进as重映射中即可实现只保留满足条件的键type FilterStringKeysT { [P in keyof T as T[P] extends string ? P : never]: T[P]; };组合模板联合类型做键加工。仓库 template-union-types.md 演示了模板字面量类型如何批量生成字符串联合type Status active | inactive; type Products p1 | p2; type ProductId id-${Products}-${Status}; // id-p1-active | id-p1-inactive | id-p2-active | id-p2-inactiveid-${Products}-${Status}展开为 4 个具体字符串字面量的联合。在as子句中用同样的插值语法对keyof T的每个键做重映射正是第五节prefix_${...}示例的通用形式。七、映射类型与内置 Utility Types 的关系理解了映射类型语法后会发现TypeScript 大量内置工具类型本质上就是映射类型的官方预置实现。仓库 type-manipulation.md 的 Utility Types 一节列举了常用的工具类型其中几个与本文主题直接对应type A PartialPerson; // { name?: string | undefined; age?: number | undefined; } type A RequiredPerson; // { name: string; age: number; } type A ReadonlyPerson;PartialT≈ 本文MyPartialT{ [P in keyof T]?: T[P] }RequiredT≈{ [P in keyof T]-?: T[P] }通过-?移除可选标记ReadonlyT≈ 本文ReadOnlyT{ readonly [P in keyof T]: T[P] }RecordK, T等价于以键联合K生成每个属性类型都是T的映射{ [P in K]: T }例如type Product { name: string; price: number }; const products: Recordstring, Product { apple: { name: Apple, price: 0.5 }, banana: { name: Banana, price: 0.25 }, };PickT, K、OmitT, K本质也是映射类型加键过滤的变体——Pick只映射K中的键Omit通过as重映射为never剔除K。也就是说掌握[P in keyof T]与修饰符加减法后你可以亲手还原出这些标准工具类型也就能理解它们在底层是如何工作的进而写出自己的定制版本。八、典型实战场景小结结合本章节与仓库上下文映射类型在真实项目中的高价值场景包括批量不可变化对接口返回的 DTO 统一加readonly防止意外改写表单/配置二态化用PartialT表示部分字段已填用RequiredT表示全部必填键名工程化用as 模板字面量生成get_${key}风格的访问器类型或id_${key}风格的事件类型按条件过滤字段结合条件类型只保留字符串字段、函数字段等特定类型的键状态机约束从字段联合生成每个字段一组状态的完整类型空间与 discriminated-unions.md、union-type.md 讨论的可辨识联合配合使用。九、总结Mapped Type 是 TypeScript 类型系统中元编程能力的核心入口[P in keyof T]提供遍历T[P]提供取值readonly/?及/-修饰符提供批量属性调整as子句配合模板字面量提供键级重映射再与条件类型、联合类型组合即可表达以类型变换类型的完整逻辑。本文内容以 印尼语版 mapped-types.md 与 英文原版 mapped-types.md 为主体深度拓展自仓库中的 mapped-type-modifiers.md、type-manipulation.md、exploring-the-type-system.md、conditional-types.md、template-union-types.md、index-signatures.md 与 type-indexing.md。读者可继续在上述章节中探索交集类型、条件类型、工具类型等相邻主题构建完整的类型操作知识体系。赞分享文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载相关推荐The Concise TypeScript Book 精读Mapped Types映射类型——用 keyof 批量转换现有类型的属性The Concise TypeScript Book 精读Mapped Types映射类型——用 keyof 批量转换现有类型的属性 映射类型Mapp文档教程《The Concise TypeScript Book》精读Mapped Types 映射类型完全指南《The Concise TypeScript Book》精读Mapped Types 映射类型完全指南 映射类型Mapped Types是 TypeSc文档教程The Concise TypeScript Book映射类型Mapped Types实战指南The Concise TypeScript Book映射类型Mapped Types实战指南 映射类型是 TypeScript 类型系统中最强大的类型变文档教程上一篇PiKVM Redfish传感器阈值配置完整指南精准设置告警触发条件下一篇微信AI助手完整搭建指南用 wechat-bot 快速接入多种大模型自动回复创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表