深入理解 TypeScript：联合类型与交叉类型的应用

news2024/11/28 8:21:54

在 TypeScript 的世界里，类型系统是核心特性之一，它提供了强大的工具来帮助开发者编写更安全、更可靠的代码。今天，我们将深入探讨 TypeScript 中的两个高级类型特性：联合类型（Union Types）和交叉类型（Intersection Types）。这两种类型为我们提供了在类型层面上进行更复杂操作的能力。

联合类型（Union Types）

联合类型表示一个值可以是几种类型之一。这在处理多种可能的数据类型时非常有用。在 TypeScript 中，联合类型通过使用管道符（|）来定义。

基本语法

type StringOrNumber = string | number;

在这个例子中，StringOrNumber 可以是 string 或 number 类型。

实际应用

假设我们有一个函数，它接受一个参数，这个参数可以是字符串或者数字，然后返回这个值的长度。

function getLength(x: string | number): number {
  if (typeof x === "string") {
    return x.length;
  } else {
    return x.toString().length;
  }
}

console.log(getLength("Hello")); // 输出 5
console.log(getLength(123));     // 输出 3

类型守卫

在处理联合类型时，类型守卫（Type Guards）是一个重要的概念。它允许我们在运行时检查变量的类型，并根据类型执行不同的逻辑。

function processValue(x: string | number) {
  if (typeof x === "string") {
    console.log(`String: ${x.toUpperCase()}`);
  } else {
    console.log(`Number: ${x.toFixed(2)}`);
  }
}

交叉类型（Intersection Types）

交叉类型是另一种强大的类型，它允许我们将多个类型合并为一个类型。这在你需要一个对象同时拥有多个类型定义的属性时非常有用。

基本语法

type NameAge = {
  name: string;
  age: number;
};

type Job = {
  jobTitle: string;
  company: string;
};

type Person = NameAge & Job;

在这个例子中，Person 类型是 NameAge 和 Job 的交叉，这意味着一个 Person 对象将同时拥有 name、age、jobTitle 和 company 属性。

实际应用

假设我们有一个用户对象，它需要同时包含个人信息和职业信息。

const user: Person = {
  name: "Alice",
  age: 30,
  jobTitle: "Software Engineer",
  company: "Moonshot AI"
};

console.log(`Name: ${user.name}, Age: ${user.age}, Job: ${user.jobTitle} at ${user.company}`);