文档教程【免费下载链接】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点击查看免费下载模板联合类型Template Union Types是 TypeScript 在类型层面实现的字符串模板它允许你像拼接字符串一样拼接类型并在联合类型参与时自动展开出所有可能组合。本文以 The Concise TypeScript Book 韩文版第 44 节 为核心骨架结合仓库中的相关章节与源码级示例讲解模板联合类型的工作原理、组合技巧、在映射类型重映射键与条件类型推断中的应用读完你就能用类型系统生成规范化的字符串字面量并写出可自动校验的精确类型。什么是模板联合类型JavaScript 开发者对模板字符串Template Literal非常熟悉反引号包裹、${expr}插值运行时拼接出字符串。TypeScript 把同样的语法搬进了类型层当你使用反引号包裹类型表达式而不是值时就得到了一个模板字面量类型Template Literal Type。模板字面量类型是 TypeScript 4.1 引入的核心能力而模板联合类型是指模板字面量类型的插槽中填入联合类型后类型系统会按照笛卡尔积展开出全部可能的字符串字面量。这与本书 리터럴 타입字面量类型 一节所讲的单元素集合如type X X一脉相承字面量类型是构建模板联合的最小积木。核心示例两个联合插槽自动展开原文档 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-inactive这段代码只有三行却演示了模板联合类型的全部关键机制插槽替换${Products}与${Status}是类型层面的插值表达式各自接收一个类型。联合分发当插槽中的类型是联合类型时TypeScript 会遍历联合的每一个成员为每个成员生成一条结果最终把所有组合拼接成一个新的联合类型。结果展开ProductId并不是一个包含${...}占位的模板字符串而是展开后的 4 个精确字符串字面量id-p1-active | id-p1-inactive | id-p2-active | id-p2-inactive。也就是说2 种 Products × 2 种 Status 4 种 ProductId。如果把联合成员数量分别记为 M 与 N结果集就是 M × N 个字符串字面量的联合。这是模板联合类型最直观的文本合并merge text应用也恰好回应了原文档中在类型系统内部合并并操纵文本merge and manipulate text inside the type system的定义。为什么能展开字符串字面量联合的分布性要理解模板联合类型为什么会自动展开需要回到本书 유니온 타입联合类型 一节的定义联合类型表示值可以是若干种类型之一用|连接。active | inactive就是两个字符串字面量类型的联合。当模板字面量类型遇到插槽中的联合时编译器会对联合的每个成员分别实例化模板再把结果重新联合起来。这在语义上等价于type ProductId | id-p1-active | id-p1-inactive | id-p2-active | id-p2-inactive;因此模板联合类型天然具备分布性distributive——这与本书 条件类型的分布性 一节描述的条件类型对裸类型参数的分发行为是同一类联合展开心智模型只要插槽里出现的是联合结果就会逐个展开、最后重新合并。三个值得注意的边界行为插槽中放入单元素字面量时模板就是普通的固定字符串类型如id-p1-active。插槽中放入string这样的宽类型时展开结果是string本身因为string是无限集合编译器不再枚举。多个插槽同时是联合时展开结果是各联合的笛卡尔积。多插槽组合构造更复杂的 ID 体系原文档的示例只有两个插槽但该机制完全可以推广到更多维度。例如在电商场景中同时约束渠道、地区与状态type Channel web | mobile | api; type Region KR | US | EU; type OrderState pending | paid | shipped; type OrderId ord-${Region}-${Channel}-${OrderState}; // 3 × 3 × 3 27 种精确字符串字面量type OrderId | ord-KR-web-pending | ord-KR-web-paid | ord-KR-web-shipped | ord-KR-mobile-pending | /* ... */ | ord-EU-api-shipped;这种做法的实际价值在于编译期校验任何拼错前缀、顺序错误或使用未定义状态拼出的OrderId都会在赋值或传参时被编译器直接拒绝而不需要等到运行时。在映射类型中重映射键模板字面量的进阶用法模板联合类型不只是静态地生成新字面量它还能与映射类型结合对已有对象的键做变换。本书 Exploring the Type System韩文版 在타입 단언类型断言一节就给出了用模板字面量重映射键的例子类型JType借助带模板字面量的映射类型为Type的每个键加上prefix_前缀并把对应属性值替换为返回原值的函数type JType { [Property in keyof Type as prefix_${string Property}]: () Type[Property]; };其要点是keyof Type产生的键往往是string | number | symbol的混合直接放进模板插槽会报错因此先用string Property把键收敛到string子集prefix_${string Property}用模板字面量重映射出带前缀的新键名属性值被替换为() Type[Property]即取值函数。这正是在类型系统中操纵文本的高级形态文本变换不再发生在值上而是直接发生在类型的键上重映射结果会自动参与类型检查任何不满足新键名形状的对象字面量都会被拒绝。与内置字符串工具类型配合大小写与首字母变换模板联合类型的插槽中还可以放入 TypeScript 内置的字符串操作工具类型对字面量做变换。本书 Type Manipulation韩文版 一节收录了如下工具类型type MyType Uppercaseabc; // ABC type MyType LowercaseABC; // abc type MyType Capitalizeabc; // Abc type MyType UncapitalizeAbc; // abc它们同样具有分布性传入联合时会对每个成员分别变换。于是可以把规范化命名直接固化到类型层面type Entity user | order; type TableName ${CapitalizeEntity}Table; // UserTable | OrderTable type Action create | delete; type Route /api/${UppercaseAction}; // /api/CREATE | /api/DELETE这样路由、表名、事件名等字符串的拼写约定就被编译器强制执行任何手写的不符合约定的字面量都无法通过类型检查。与条件类型 infer 结合从字符串中提取子串模板联合类型最强大的能力之一是配合条件类型中的infer做模式匹配提取。模板字面量的插槽可以在infer中充当通配符把匹配到的子串提取成类型type ExtractIdS extends string S extends id-${infer Rest} ? Rest : never; type A ExtractIdid-p1-active; // p1-active type B ExtractIduser-123; // never前缀不匹配多个插槽可以同时提取多个片段type ParseProductIdS extends string S extends id-${infer Product}-${infer State} ? [Product, State] : never; type Parsed ParseProductIdid-p2-active; // [p2, active]infer在模板中的位置决定了截取的分界这使模板联合类型不仅是生成器还是解析器——你可以用同一套类型定义完成字符串的编码与解码并且两端共享同一份联合类型作为合法值域。这与本书 infer 在条件类型中的类型推断 一节的思路一致只是把infer的作用对象从函数参数换成了字符串。结合判别联合使用让字符串字面量参与流程收敛模板联合类型生成的字符串字面量联合还可以直接作为**判别联合Discriminated Union**的判别字段让类型在分支中自动收敛。本书 판별 유니온判别联合 一节指出在联合中通过显式标签tag区分不同类型是 TypeScript 的经典模式。结合模板联合类型type EventType order:${created | cancelled}; // order:created | order:cancelled type OrderCreated { kind: order:created; orderId: string; createdAt: Date; }; type OrderCancelled { kind: order:cancelled; orderId: string; reason: string; }; type OrderEvent OrderCreated | OrderCancelled; function handle(event: OrderEvent) { if (event.kind order:created) { // 此处 event 被收窄为 OrderCreated可安全访问 createdAt console.log(event.createdAt); } else { // 此处 event 被收窄为 OrderCancelled可安全访问 reason console.log(event.reason); } }这里EventType甚至可以先定义再让OrderCreated[kind]等属性与之保持约束一致从而把事件名由枚举前缀 动作联合拼接而成的规则固化到整个类型系统。实战注意与局限模板联合类型很强大但有几个实用边界需要明确这些都可以从仓库相关章节与 TypeScript 行为推知插槽只接受字符串类类型number、boolean字面量也可以进入插槽会被转换为对应字符串表示但symbol、object等不能直接插值通常需要先做类型层面的转换或交叉收敛。宽类型会吞掉联合一旦插槽里出现string结果直接退化为string不再展开枚举。结果集随联合成员数量指数增长多个大联合的笛卡尔积会生成巨大数量的字符串字面量应在设计上控制插槽的联合规模避免类型实例化膨胀影响编译体验。可读性优先当模板嵌套超过两层、插槽过多时可以像本书其他章节一样先定义中间类型别名再组合便于排查类型错误。在本书中的位置与延伸阅读在 The Concise TypeScript Book 目录韩文版 中模板联合类型第 44 节位于类型系统主题的中间位置前承 리터럴 타입第 17 节与 유니온 타입第 32 节后接 매핑된 타입映射类型 等类型操纵章节最终汇入 타입 조작Type Manipulation 的大框架。本书英文原版 Template Union Types 与韩文版内容一致各语言版本如 bg-bg 版也保持同一结构。若想继续深入推荐按以下顺序阅读仓库中的相关章节Exploring the Type System韩文版模板字面量重映射键、判别联合、字面量类型推断的基础。Type Manipulation韩文版Uppercase/Capitalize等字符串工具类型的完整清单。Distributive Conditional Types理解联合分发与模板展开的同一心智模型。掌握模板联合类型之后你可以把字符串约定ID 格式、路由、事件名、表名全部提升到类型层让编译器成为你最严格的拼写检查器——这正是 The Concise 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》模板联合类型Template Union Types实战在类型系统中组合与约束文本《The Concise TypeScript Book》模板联合类型Template Union Types实战在类型系统中组合与约束文本 模板联合类型文档教程The Concise TypeScript Book模板联合类型Template Union Types完全指南The Concise TypeScript Book模板联合类型Template Union Types完全指南 模板联合类型Template Uni文档教程The Concise TypeScript Book 中的模板联合类型Template Union Types实战指南The Concise TypeScript Book 中的模板联合类型Template Union Types实战指南 导读 模板联合类型Templa文档教程创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考