TypeScript交叉类型：让类型组合更灵活的小技巧

写前端代码时，经常会遇到这样的情况：一个对象既要包含用户信息，又得有权限配置。如果每个都重新定义接口，重复代码就多了。这时候，TypeScript 的交叉类型就能派上用场，像拼积木一样把已有类型组合起来。

什么是交叉类型

交叉类型的写法是用 & 符号连接两个或多个类型，表示新类型同时具备所有成员。比如你有一个用户的基本资料，又有一份操作权限的定义，合在一起就能快速生成一个完整的管理员类型。

interface User {
  name: string;
  age: number;
}

interface Permissions {
  canEdit: boolean;
  canDelete: boolean;
}

type Admin = User & Permissions;

const admin: Admin = {
  name: '张三',
  age: 30,
  canEdit: true,
  canDelete: true
};

这样写，不需要重复声明字段，维护起来也方便。改一处，多处受益。

实际场景中的妙用

在做网络监控面板时，设备数据可能来自不同接口。比如一部分是设备状态，另一部分是告警阈值设置。用交叉类型可以把这些分散的结构合并成一个完整视图。

interface DeviceStatus {
  id: string;
  online: boolean;
  lastSeen: number;
}

interface AlertConfig {
  cpuThreshold: number;
  memoryThreshold: number;
}

type MonitorDevice = DeviceStatus & AlertConfig;

const device: MonitorDevice = {
  id: 'dev-001',
  online: true,
  lastSeen: Date.now(),
  cpuThreshold: 80,
  memoryThreshold: 90
};

页面里直接使用 device 就能访问全部字段，类型检查也不会报错。代码清晰，还能减少运行时出问题的概率。

和联合类型别搞混了

有人容易把交叉类型和联合类型（|）弄混。联合类型表示“可以是这个或者那个”，而交叉类型是“必须同时满足”。比如 string | number 是字符串或数字，但 User & Permissions 是既要用户信息又要权限。

当你想扩展已有类型，而不是替换它的时候，优先考虑交叉类型。尤其是在多人协作项目中，避免动别人的接口定义，又能灵活组合，省事又安全。