TypeScript：交叉类型、联合类型和类型保护揭秘

前端

2024-01-12 23:18:21

在 TypeScript 中掌握高级类型：交叉类型、联合类型和类型保护

TypeScript 的类型系统为开发人员提供了强大的工具，可以创建灵活且健壮的代码。其中，交叉类型、联合类型和类型保护扮演着至关重要的角色，让我们深入了解这些高级类型及其在实践中的应用。

交叉类型：融合不同类型的强大力量

交叉类型将多个类型融合在一起，形成一个新的类型，继承了所有组成类型中的属性和方法。就像用乐高积木拼凑出一个新玩具，交叉类型让我们构建更复杂、更丰富的类型。

联合类型：驾驭多变的类型

联合类型表示一个变量可以具有多种类型，就像一盒五彩缤纷的糖果，联合类型为我们的代码引入了灵活性。

类型保护：揭开不同类型的秘密

类型保护允许我们根据变量的类型对它们进行区分，就像侦探破案，类型保护帮助我们找到正确的类型。

高级类型在实践中的应用

这些高级类型在 TypeScript 中有着广泛的应用：

函数参数类型检查： 联合类型可确保函数只接受特定类型的参数。
数据建模： 交叉类型和联合类型可创建复杂的数据结构，反映现实世界的场景。
类型别名： 类型保护可简化复杂类型的使用，就像为类型起个别名。
类型转换： 类型保护可安全地将变量从一种类型转换为另一种类型。

示例

以下代码示例展示了交叉类型和联合类型在实践中的应用：

// 定义一个 Person 接口
interface Person {
  name: string;
  age: number;
}

// 定义一个 Employee 接口
interface Employee {
  salary: number;
  department: string;
}

// 创建一个 PersonEmployee 交叉类型
type PersonEmployee = Person & Employee;

// 创建一个 personEmployee 对象
const john: PersonEmployee = {
  name: 'John',
  age: 30,
  salary: 50000,
  department: 'Engineering',
};

// 创建一个 NumberOrString 联合类型
type NumberOrString = number | string;

// 创建一个 variable 变量并将其赋值为字符串
let variable: NumberOrString = 'Hello';

// 使用类型保护检查 variable 的类型
if (typeof variable === 'string') {
  console.log('Variable is a string');
}