一、联合类型（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 | undefined
const effectiveConfig = config || { maxAge: 3600 };
}开发建议
- 优先使用联合类型处理多态数据，比
any类型更安全 - 结合类型守卫（Type Guards） 进行精确类型处理
- 避免过度宽泛的联合，如
string | number | boolean建议重构为更具体的联合 - 使用类型别名（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"
};开发建议
- 优先用于对象类型合并，基础类型交叉会产生
never - 替代多接口继承，解决 TS 接口不能多继承的问题
- 避免深度嵌套交叉，超过3层的交叉类型建议重构
- 与泛型结合 实现灵活的类型操作
三、关键差异与注意事项
类型特性对比
| 特性 | 联合类型（|） | 交叉类型（&） |
|---------------------|------------------------|-----------------------|
| 语义 | 逻辑"或"关系 | 逻辑"与"关系 |
| 适用场景 | 处理不同类型输入 | 合并类型特性 |
| 基础类型操作 | 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"四、工程化实践建议
- 项目规范
// 建议：独立类型声明文件（types.d.ts）
export type APIResponse<T> =
| { status: 'success'; data: T }
| { status: 'error'; code: number };- 文档注释
/**
* 用户身份联合类型
* @typedef {AdminUser | NormalUser} UserRole
* @property {boolean} AdminUser.isSuperAdmin - 超级管理员标识
* @property {string} NormalUser.department - 所属部门
*/
type UserRole = AdminUser | NormalUser;- 性能优化
// 避免过度使用交叉类型
// 不推荐：超过3层的交叉类型
type OverComplex = A & B & C & D;
// 推荐：使用接口继承重构
interface Combined extends A, B, C, D {}总结
联合类型与交叉类型共同构成了TS类型系统的核心武器库。
联合类型（Union Types）擅长处理不确定性输入，交叉类型（Intersection Types）专注解决确定性的类型组合。
掌握二者的本质区别与适用边界，配合类型守卫等辅助手段，能够大幅提升代码的类型安全性。
在实际项目中，建议将复杂类型操作限制在系统边界层（如API响应处理），保持核心业务逻辑的类型简洁性。
