谈谈 TypeScript 中的联合类型（union types）和交织类型（intersection ty ...

一、联合类型（Union Types）

核心概念

利用管道符 | 表示多选一关系，典型场景：处理可能存在多种类型的变量

1. // 基础示例：处理数值型ID（number）或哈希型ID（string）
2. type EntityID = number | string;
4. function getEntity(id: EntityID) {
5.   // 类型守卫处理分支逻辑
6.   if (typeof id === 'number') {
7.     console.log(`Fetching by numeric ID: ${id.toFixed(2)}`);
8.   } else {
9.     console.log(`Fetching by hash ID: ${id.toUpperCase()}`);
10.   }
11. }

复制代码

实战应用场景

1. 可辨识联合（Discriminated Unions）

通过公共字段实现准确类型推断，实用于状态机等场景

1. // 图形系统形状定义
2. type Shape =
3.   | { kind: "circle"; radius: number }     // 圆形
4.   | { kind: "square"; size: number }       // 正方形
5.   | { kind: "rectangle"; width: number; height: number };  // 长方形
7. function calculateArea(shape: Shape): number {
8.   switch (shape.kind) {
9.     case "circle":
10.       return Math.PI * shape.radius ​** 2;  // 自动识别radius属性
11.     case "square":
12.       return shape.size ​** 2;             // 自动识别size属性
13.     case "rectangle":
14.       return shape.width * shape.height;  // 自动识别宽高属性
15.   }
16. }

复制代码

2. 可选参数处理

与 undefined 联用实现可选参数类型定义

1. // 带缓存的读取函数
2. type CacheConfig = {
3.   maxAge: number;
4.   useLocalStorage?: boolean;
5. };
7. function readCache(key: string, config?: CacheConfig) {
8.   // 类型自动推断为 CacheConfig | undefined
9.   const effectiveConfig = config || { maxAge: 3600 };
10. }

复制代码

开发发起

• ​优先利用联合类型处理多态数据，比 any 类型更安全
  
• ​联合类型保卫（Type Guards）​ 进行准确类型处理
  
• ​克制过度宽泛的联合，如 string | number | boolean 发起重构为更具体的联合
  
• ​利用类型别名（type）管理复杂联合类型，提升代码可维护性
  

二、交织类型（Intersection Types）

核心概念

利用 & 符号实现类型合并，类似接口继承但更灵活

1. // 基础示例：合并用户基础信息与权限信息
2. type User = {
3.   id: number;
4.   name: string;
5. };
7. type Permission = {
8.   canEdit: boolean;
9.   isAdmin: boolean;
10. };
12. type UserWithPermission = User & Permission;
14. const adminUser: UserWithPermission = {
15.   id: 1,
16.   name: "Alice",
17.   canEdit: true,
18.   isAdmin: true
19. };

复制代码

实战应用场景

1. 混入模式（Mixin Pattern）

实现功能组合的最佳实践

1. // 可序列化能力混入
2. type Serializable = {
3.   serialize(): string;
4. };
6. class BaseModel {
7.   constructor(public id: number) {}
8. }
10. // 通过交叉类型实现混入
11. type SerializableModel = BaseModel & Serializable;
13. const userModel: SerializableModel = {
14.   ...new BaseModel(1),
15.   serialize() {
16.     return JSON.stringify(this);
17.   }
18. };

复制代码

2. 复杂配置合并

合并多个配置类型生成完整配置

1. // 分阶段配置定义
2. type BaseConfig = {
3.   apiEndpoint: string;
4.   timeout: number;
5. };
7. type AuthConfig = {
8.   clientId: string;
9.   token: string;
10. };
12. type LoggingConfig = {
13.   logLevel: "debug" | "info";
14. };
16. // 生成完整配置类型
17. type AppConfig = BaseConfig & AuthConfig & LoggingConfig;
19. const config: AppConfig = {
20.   apiEndpoint: "/api",
21.   timeout: 5000,
22.   clientId: "web-app",
23.   token: "abc123",
24.   logLevel: "debug"
25. };

复制代码

开发发起

• ​优先用于对象类型合并，基础类型交织会产生 never
  
• ​更换多接口继承，办理 TS 接口不能多继承的问题
  
• ​克制深度嵌套交织，超过3层的交织类型发起重构
  
• ​与泛型联合 实现灵活的类型操作
  

三、关键差别与注意事项

类型特性对比

| 特性 | 联合类型（|） | 交织类型（&） |
|---------------------|------------------------|-----------------------|
| 语义 | 逻辑"或"关系 | 逻辑"与"关系 |
| 实用场景 | 处理差别类型输入 | 合并类型特性 |
| 基础类型操作 | string | number 有效 | string & number => never |
| 对象类型合并 | 创建包含共有属性的类型 | 合并所有属性 |
常见问题处理

1. 类型紧缩陷阱

1. // 危险操作：未进行类型检查直接访问属性
2. function getLength(input: string | string[]) {
3.   // 编译错误：未收缩类型时访问length不安全
4.   return input.length; // Error: Property 'length' does not exist on type 'string | string[]'
5.   
6.   // 正确做法：类型断言或类型守卫
7.   if (typeof input === 'string') return input.length;
8.   return input.length;
9. }

复制代码

2. 交织类型误用

1. // 危险操作：基本类型交叉产生 never
2. type Impossible = string & number;  // 类型为 never
4. // 实际影响
5. function handleValue(val: string & number) {
6.   console.log(val); // 该函数永远无法被调用
7. }

复制代码

高级本领

1. 类型保卫优化

1. // 自定义类型守卫
2. function isErrorResponse(
3.   response: SuccessResponse | ErrorResponse
4. ): response is ErrorResponse {
5.   return (response as ErrorResponse).error !== undefined;
6. }
8. // 使用示例
9. if (isErrorResponse(res)) {
10.   console.error(res.error.message);
11. }

复制代码

2. 类型分发处理

1. // 条件类型中的分发特性
2. type ExtractString<T> = T extends string ? T : never;
4. // 实际应用
5. type Result = ExtractString<"hello" | 42 | true>;  // 得到类型 "hello"

复制代码

四、工程化实践发起

• ​项目规范
  

1. // 建议：独立类型声明文件（types.d.ts）
2. export type APIResponse<T> =
3.   | { status: 'success'; data: T }
4.   | { status: 'error'; code: number };

复制代码

• ​文档注释
  

1. /**
2. * 用户身份联合类型
3. * @typedef {AdminUser | NormalUser} UserRole
4. * @property {boolean} AdminUser.isSuperAdmin - 超级管理员标识
5. * @property {string} NormalUser.department - 所属部门
6. */
7. type UserRole = AdminUser | NormalUser;

复制代码

• 性能优化
  

1. // 避免过度使用交叉类型
2. // 不推荐：超过3层的交叉类型
3. type OverComplex = A & B & C & D;
5. // 推荐：使用接口继承重构
6. interface Combined extends A, B, C, D {}

复制代码

总结

联合类型与交织类型共同构成了TS类型系统的核心武器库。
联合类型（Union Types）擅优点理不确定性输入，交织类型（Intersection Types）专注办理确定性的类型组合。
把握二者的本质区别与实用界限，共同类型保卫等辅助手段，可以或许大幅提升代码的类型安全性。
在现实项目中，发起将复杂类型操作限定在系统界限层（如API响应处理），保持核心业务逻辑的类型简洁性。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。