TypeScript中的交叉类型和联合类型示例讲解

在TypeScript中，交叉类型和联合类型是两个非常重要的概念，它们可以让我们在代码中更好地使用类型约束。

什么是交叉类型和联合类型

在介绍示例之前，先来简要解释一下交叉类型和联合类型的概念。

• 交叉类型：通过将多个类型合并成一个类型来创建新的类型。交叉类型使用&符号进行连接，表示同时具有多种类型的特性。
• 联合类型：表示一个值可以是多种类型之一。联合类型使用|符号进行连接，表示具有多种类型的定义。

示例一：交叉类型

假设我们要实现一个函数，传入两个对象，合并他们的属性。我们可以定义一个merge函数，如下所示：

function merge<T, U>(obj1: T, obj2: U): T & U {
  return Object.assign({}, obj1, obj2);
}

const result = merge({ name: "Bob", age: 30 }, { city: "Shanghai" });

在这个示例中，我们使用T & U定义了一个交叉类型。在merge函数中，我们接受两个泛型参数T和U，并使用Object.assign将两个对象合并成一个，并使用T & U将结果类型指定为交叉类型。这样做的好处是，在函数调用后，可以直接访问对象中的所有属性。

示例二：联合类型

假设我们需要一个函数，能够接受一个数字或一个字符串，并返回它的长度。我们可以这样定义：

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

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

在这个示例中，我们使用string | number定义了一个联合类型。lengthOfValue函数接受一个参数，类型为字符串或数字。在函数中，我们通过判断传入值的类型，来对字符串和数字类型分别处理。联合类型的好处是，参数可以接受多种类型，而函数内部可以根据不同类型进行处理。

总结

通过以上两个示例，我们可以看到交叉类型和联合类型在TypeScript中的使用，它们分别可以用来表示合并类型和多种类型的定义。掌握交叉类型和联合类型的使用，可以让我们在代码中更加灵活地运用类型约束，提高代码的可读性和可维护性。