18 | 高级类型（1）：交叉类型与联合类型-TypeScript开发实战

当前位置:　首页>> 技术小册>> TypeScript开发实战

18 | 高级类型（1）：交叉类型与联合类型

在TypeScript的世界里，类型系统是其最强大的特性之一，它允许开发者在编译时期就捕获到许多潜在的错误，从而提升代码的质量和可维护性。随着项目复杂度的增加，基础的类型定义（如number、string、boolean以及接口和类类型）往往难以满足所有需求。这时，高级类型就显得尤为重要，它们为TypeScript的类型系统增添了更多的灵活性和表达能力。本章将深入探讨两种高级类型：交叉类型（Intersection Types）与联合类型（Union Types），它们是理解和使用TypeScript高级特性不可或缺的基础。

交叉类型（Intersection Types）

交叉类型允许我们将多个类型合并为一个类型，这个新类型将包含所有被合并类型的特性。它使用&符号来定义。想象一下，你有一个用户信息的接口，同时你又希望这个用户能够拥有一些额外的权限信息。此时，交叉类型就能派上用场。

示例：用户与权限的交叉类型

首先，我们定义两个接口：User和Permissions。

interface User {
  name: string;
  age: number;
}
interface Permissions {
  canEdit: boolean;
  canDelete: boolean;
}

现在，我们想要一个类型来表示一个既有用户信息又有权限的用户。我们可以使用交叉类型来实现这一点。

type UserWithPermissions = User & Permissions;
// 使用
const admin: UserWithPermissions = {
  name: "John Doe",
  age: 30,
  canEdit: true,
  canDelete: true
};
// 错误示例：缺少canEdit属性
const regularUser: UserWithPermissions = {
  name: "Jane Doe",
  age: 25,
  // canEdit: false, // 缺少此行将导致编译错误
  canDelete: false
};

在上面的例子中，UserWithPermissions类型就是User和Permissions接口的交叉类型。任何被声明为UserWithPermissions类型的变量都必须同时满足User和Permissions接口的所有要求。

交叉类型的特性

属性合并：如果两个类型中有相同的属性名但类型不同，则交叉类型中该属性的类型必须是这两个类型的兼容类型（例如，string & number是不合法的，但如果是两个接口有相同属性但类型可兼容，则可能合法，这通常通过类型断言或更复杂的类型关系处理）。
扩展性：交叉类型可以很容易地扩展现有类型，而无需修改原始类型定义。
限制：交叉类型不能包含任何重复的属性名且这些属性名对应的类型必须兼容。

联合类型（Union Types）

与交叉类型相反，联合类型允许一个变量是几种类型中的任意一种。它使用|符号来定义。联合类型在处理可能具有多种形态的数据时非常有用，比如函数重载、可选参数等场景。

示例：数字或字符串的联合类型

type NumberOrString = number | string;
let value: NumberOrString = 42;
value = "Hello, World!"; // 有效
// 访问属性时需要注意类型安全
// 错误的做法，因为不能确定value是string还是number
// console.log(value.length); // TypeScript 会报错，因为number没有length属性
// 安全的做法
if (typeof value === 'string') {
  console.log(value.length);
}

在上面的例子中，NumberOrString是一个联合类型，它可以是number类型或string类型。当尝试访问一个联合类型变量的属性或方法时，TypeScript编译器会要求你确保当前操作是安全的，即需要通过类型守卫（如typeof检查、instanceof检查或使用自定义的类型守卫函数）来缩小类型的范围。

联合类型的特性

灵活性：允许变量有多种类型，提高了代码的灵活性。
类型守卫：在处理联合类型时，必须使用类型守卫来确保操作的类型安全。
类型推断：在联合类型上执行操作时，TypeScript会尽可能推断出最精确的类型。
默认值：在定义可能为null或undefined的联合类型时，可以很方便地处理可选值的情况。

高级应用：交叉类型与联合类型的结合使用

在实际开发中，交叉类型和联合类型往往不是孤立使用的，它们经常结合在一起，以构建更复杂且表达能力更强的类型系统。

示例：带有可选权限的用户类型

interface BaseUser {
  name: string;
  age: number;
}
type UserRole = 'admin' | 'editor' | 'viewer';
interface AdminPermissions {
  canEdit: true;
  canDelete: true;
}
interface EditorPermissions {
  canEdit: true;
  canDelete: false;
}
interface ViewerPermissions {
  canEdit: false;
  canDelete: false;
}
type UserWithRole =
  | (BaseUser & AdminPermissions & { role: 'admin' })
  | (BaseUser & EditorPermissions & { role: 'editor' })
  | (BaseUser & ViewerPermissions & { role: 'viewer' });
const user: UserWithRole = {
  name: "Alice",
  age: 28,
  canEdit: true,
  canDelete: true,
  role: 'admin'
};
// 访问用户权限时，可以安全地根据role属性来决定
if (user.role === 'admin') {
  console.log(user.canEdit); // true
  console.log(user.canDelete); // true
}

在这个例子中，我们定义了一个UserWithRole类型，它是BaseUser接口与不同权限接口（AdminPermissions、EditorPermissions、ViewerPermissions）以及一个role属性的联合类型。这样的类型定义既灵活又强大，能够清晰地表达用户的角色及其对应的权限。

总结

交叉类型和联合类型是TypeScript高级类型系统中的两个核心概念，它们极大地增强了TypeScript类型系统的表达能力和灵活性。通过合理使用这两种类型，我们可以构建出既安全又易于维护的代码库。在实际项目中，结合具体需求灵活运用这些高级类型，将有助于提高代码质量和开发效率。