文档教程【免费下载链接】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),仅供参考
企业数字化 ERP 产品动态
相关推荐
Senparc.Weixin 微信全平台 .NET SDK 实战指南:从三行代码到生产级消息服务 后端即时通讯金融科技 【免费下载链接】WeiXinMPSDK 微信全平台 .NET SDK, Senparc.Weixin for C#,支持 .NET Framework 及 .NET Core、.NET 10.0。已支持微信公众号、小程序、小游戏、微信支付、企业微信/企业号、开放平台、JSSDK、微信周边等全平台。 … · 2026/9/25 5:48:01
Win11专业版启用IE7兼容模式实战指南 1. 项目概述:为什么Win11专业版用户还在为IE7兼容性焦头烂额?Win11专业版系统里,Edge浏览器默认已彻底移除对IE内核的原生支持——这事儿不是“功能隐藏”,而是微软在2023年2月起就正式关闭了IE模式的底层服务接口。但现实很骨感&… · 2026/9/25 5:47:49
CSM331A四种CAN扩展模式选型与工程落地指南 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 6:23:17
西工大NOJ前100题刷题指南:从C语言基础到指针递归的进阶修炼 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 6:23:17
Atlas 300V加速卡部署YOLO实战:从模型转换到推理调优 最近在折腾视频分析项目的推理硬件,从GPU一路试到华为的Atlas系列,手头这块Atlas 300V 24G算是用了最久的。如果你正好也在纠结“Atlas 300V 24G到底是不是运算加速卡”,或者想在它上面把YOLO跑起来,这篇应该能帮你少走不少弯路。… · 2026/9/25 6:23:11
C++语言基础与关键字解析:从数据类型到工程实践 1. C语言基础与关键字解析C作为一门经典的编程语言,其关键字系统构成了语法体系的核心骨架。对于初学者而言,全面掌握这些关键字不仅能够避免语法错误,更能深入理解语言设计哲学。让我们从实际开发角度重新梳理这些关键元素。1.1 数据类型关键… · 2026/9/25 6:23:05
Git密码认证被禁用?SSH密钥与PAT安全配置指南 1. 这个报错不是Git的问题,而是你正在被Git服务端“礼貌拒收”提示:remote: Invalid username or token. Password authentication is not supported for Git operations—— 这行红字不是Git客户端出错了,它是一份来自GitHub、GitLab、Gitee… · 2026/9/25 6:23:05
Tomcat线程模型与OOM问题深度解析 1. 问题背景与现象分析最近在排查一个线上服务异常时,遇到了一个典型的OOM(OutOfMemoryError)问题。这个案例非常有意思,因为它不仅涉及到内存溢出本身,还引发了Tomcat线程模型的异常表现,最终导致服务不可… · 2026/9/25 6:22:58
创维E900V22D刷机全攻略:S905L3SB芯片兼容性解析与救砖实战 /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:31
MQTT协议原理与Broker服务器搭建实战:从Mosquitto到EMQX /* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views … · 2026/9/25 1:00:37