交叉类型与类型标记技巧TypeScript-New-Handbook 类型组合高级玩法【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook在 TypeScript 的类型系统里交叉类型Intersection Type和类型标记Type Tagging是两把让代码更健壮的利器。本篇文章基于开源项目 TypeScript-New-Handbook新一代 TypeScript 官方手册的孵化仓库中的 Object Types 与 Narrowing 章节为你拆解交叉类型的用法、它与 interface 的区别以及如何用类型标记技巧实现可辨识联合Discriminated Union帮你彻底掌握TypeScript 类型组合的高级玩法。无论你是刚入门的新手还是写 TS 一两年的老手都能从中获得实实在在的收益。什么是交叉类型用 符号组合多个对象类型交叉类型是 TypeScript 提供的类型组合核心机制主要用来把多个已有的对象类型合并成一个新类型语法上使用运算符。它的名字听起来抽象但理解起来很简单交叉类型的结果同时拥有所有参与类型的全部成员。interface Colorful { color: string; } interface Circle { radius: number; } type ColorfulCircle Colorful Circle;经过上面的组合ColorfulCircle就同时拥有了color和radius两个属性就像把两张卡片粘在一起。你甚至可以在函数参数中直接使用交叉类型function draw(circle: Colorful Circle) { console.log(Color was ${circle.color}); console.log(Radius was ${circle.radius}); }调用时只要传入的对象同时包含color和radiusTypeScript 就会放行如果漏写或拼错属性编译器会立刻报错帮你把错误拦截在运行之前。这正是交叉类型在日常开发中最实用的场景组合配置对象、合并接口返回的数据结构、为第三方类型扩展能力。交叉类型和 interface 继承如何选择更优方案很多新手会疑惑交叉类型和 interface 的extends继承看起来都能组合类型到底该用哪个这是 TypeScript 类型组合中最经典的抉择之一它们的核心区别在于冲突属性如何处理。对比维度interface 继承交叉类型合并方式通过extends继承通过运算组合同名属性冲突后声明者覆盖前声明者冲突时合并为交叉可能变成never能否命名结果直接得到接口名需要用 type 别名命名适用场景面向对象、类实现、可扩展 API组合已有类型、工具类型、条件分支用 interface 做继承时同名属性会被后声明的一方覆盖而使用交叉类型时如果两个类型声明了同名但类型不兼容的属性结果会变成一个几乎不可用的never类型。因此当你需要组合第三方库的类型、或编写泛型工具类型时优先考虑交叉类型当你面向 API 扩展、类继承设计时interface 通常更直观。想深入了解两者差异可以参考 TypeScript-New-Handbook 的 Object Types.md 中 Interfaces vs. Intersections 一节。类型标记技巧用可辨识联合让类型自动收窄如果说交叉类型是组合那么类型标记就是区分。类型标记技巧的核心思路是为联合类型中的每个成员添加一个拥有字符串字面量类型的公共属性通常叫kind或typeTypeScript 就能根据这个标记自动收窄Narrow类型让每个分支都获得精确的类型提示。先看一个反面教材把所有字段堆在一个 interface 里并用可选属性 非空断言!硬撑interface Shape { kind: circle | square; radius?: number; sideLength?: number; }这种写法写起来省事但类型检查器无法根据kind判断radius是否存在你只能到处用!安抚编译器代码一改动就容易出错。改用类型标记技巧后一切豁然开朗interface Circle { kind: circle; radius: number; } interface Square { kind: square; sideLength: number; } type Shape Circle | Square;当联合类型中每个成员都包含一个字面量类型的公共属性时TypeScript 就认为这是一个可辨识联合Discriminated Unionkind就是判别属性。此时在switch或if里检查shape.kind编译器会自动把shape收窄成对应的具体类型无需任何断言function getArea(shape: Shape) { switch (shape.kind) { case circle: return Math.PI * shape.radius ** 2; case square: return shape.sideLength ** 2; } }每个分支里radius、sideLength都能获得准确的类型提示这就是类型标记技巧最迷人的地方让类型系统替你把活儿干了。完整推导过程可以查看 TypeScript-New-Handbook 的 Narrowing.md 中 Discriminated unions 一节。类型标记实战网络消息与状态管理的建模可辨识联合的价值远不止圆形和正方形。它几乎是为 JavaScript 世界里一切消息传递场景量身定做的——网络通信、状态管理、表单提交等。想象一个前端与后端交互的消息结构type Message | { kind: login; user: string } | { kind: logout } | { kind: update; key: string; value: number };在处理消息时通过switch (msg.kind)就能让每个分支获得独立、安全的类型上下文彻底告别 手写判断 类型断言 的笨办法。在状态管理框架中用类型标记建模 action 也是社区公认的最佳实践结合never类型做穷尽性检查Exhaustiveness Checking还能保证以后新增分支时编译器提醒你处理遗漏从源头减少线上 bug。新手常见误区与避坑指南最后给大家整理几个交叉类型与类型标记使用中常见的坑帮你少走弯路误区一把交叉类型当成覆盖。同名属性冲突时交叉类型并不会覆盖而是产生交集不兼容时甚至变成never组合前务必确认属性名没有冲突。误区二类型标记用普通string而不是字面量联合。把kind写成string会丧失收窄能力一定要写成circle | square这种字面量类型。误区三依赖可选属性 !非空断言。正确做法是用可辨识联合把不同形态拆成独立类型让编译器替你推断。误区四混淆交叉与并集。是都要有|是二选一两者可以结合使用先|区分、再组合但前提是先理解各自的语义。掌握TypeScript 类型组合的精髓等于给代码上了一道免费的保险。想系统学习更多内容可以阅读 TypeScript-New-Handbook 仓库中的 Everyday Types.md、Object Types.md 与 Narrowing.md 三个章节配合仓库中 handbook.js 与 handbook.scss 等配套资源动手实践。从今天起用交叉类型组合、用类型标记区分写出更安全、更优雅的 TypeScript 代码吧【免费下载链接】TypeScript-New-HandbookIncubation repository for the new TypeScript handbook 项目地址: https://gitcode.com/gh_mirrors/ty/TypeScript-New-Handbook创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
