网址打不开怎么解决_腾虎网络广州网站建设_中国企业网官方网站_网络营销推广策划

一、联合类型（Union Types）

核心概念

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

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

实战应用场景

1. 可辨识联合（Discriminated Unions）

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

// 图形系统形状定义
type Shape = | { kind: "circle"; radius: number }     // 圆形| { kind: "square"; size: number }       // 正方形| { kind: "rectangle"; width: number; height: number };  // 长方形function calculateArea(shape: Shape): number {switch (shape.kind) {case "circle":return Math.PI * shape.radius ​** 2;  // 自动识别radius属性case "square":return shape.size ​** 2;             // 自动识别size属性case "rectangle":return shape.width * shape.height;  // 自动识别宽高属性}
}

2. 可选参数处理

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

// 带缓存的读取函数
type CacheConfig = {maxAge: number;useLocalStorage?: boolean;
};function readCache(key: string, config?: CacheConfig) {// 类型自动推断为 CacheConfig | undefinedconst effectiveConfig = config || { maxAge: 3600 };
}

开发建议

1. ​优先使用联合类型处理多态数据，比 any 类型更安全
2. ​结合类型守卫（Type Guards）​ 进行精确类型处理
3. ​避免过度宽泛的联合，如 string | number | boolean 建议重构为更具体的联合
4. ​使用类型别名（type）管理复杂联合类型，提升代码可维护性

二、交叉类型（Intersection Types）

核心概念

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

// 基础示例：合并用户基础信息与权限信息
type User = { id: number;name: string;
};type Permission = {canEdit: boolean;isAdmin: boolean;
};type UserWithPermission = User & Permission;const adminUser: UserWithPermission = {id: 1,name: "Alice",canEdit: true,isAdmin: true
};

实战应用场景

1. 混入模式（Mixin Pattern）

实现功能组合的最佳实践

// 可序列化能力混入
type Serializable = {serialize(): string;
};class BaseModel {constructor(public id: number) {}
}// 通过交叉类型实现混入
type SerializableModel = BaseModel & Serializable;const userModel: SerializableModel = {...new BaseModel(1),serialize() {return JSON.stringify(this);}
};

2. 复杂配置合并

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

// 分阶段配置定义
type BaseConfig = {apiEndpoint: string;timeout: number;
};type AuthConfig = {clientId: string;token: string;
};type LoggingConfig = {logLevel: "debug" | "info";
};// 生成完整配置类型
type AppConfig = BaseConfig & AuthConfig & LoggingConfig;const config: AppConfig = {apiEndpoint: "/api",timeout: 5000,clientId: "web-app",token: "abc123",logLevel: "debug"
};

开发建议

1. ​优先用于对象类型合并，基础类型交叉会产生 never
2. ​替代多接口继承，解决 TS 接口不能多继承的问题
3. ​避免深度嵌套交叉，超过3层的交叉类型建议重构
4. ​与泛型结合 实现灵活的类型操作

三、关键差异与注意事项

类型特性对比

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

常见问题处理

1. 类型收缩陷阱

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

2. 交叉类型误用

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

高级技巧

1. 类型守卫优化

// 自定义类型守卫
function isErrorResponse(response: SuccessResponse | ErrorResponse
): response is ErrorResponse {return (response as ErrorResponse).error !== undefined;
}// 使用示例
if (isErrorResponse(res)) {console.error(res.error.message);
}

2. 类型分发处理

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

四、工程化实践建议

1. ​项目规范

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

1. ​文档注释

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

1. 性能优化

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

总结

联合类型与交叉类型共同构成了TS类型系统的核心武器库。

联合类型（Union Types）擅长处理不确定性输入，交叉类型（Intersection Types）专注解决确定性的类型组合。

掌握二者的本质区别与适用边界，配合类型守卫等辅助手段，能够大幅提升代码的类型安全性。

在实际项目中，建议将复杂类型操作限制在系统边界层（如API响应处理），保持核心业务逻辑的类型简洁性。