TypeScript 类型声明：联合类型和交叉类型详解

TypeScript 类型声明：联合类型和交叉类型详解

TypeScript 中的类型声明可以帮助我们更好地组织代码，提高代码的可读性和安全性。其中，联合类型和交叉类型是两种常用的类型声明方式，它们能够满足不同的需求。

联合类型

联合类型允许一个变量拥有多个类型之一。例如，我们可以定义一个名为 Fruit 的联合类型，它可以是 'apple'、'banana' 或 'orange'。

type Fruit = 'apple' | 'banana' | 'orange';
type Color = 'red' | 'green' | 'blue';

function getFruitColor(fruit: Fruit): Color {
  if (fruit === 'apple') {
    return 'red';
  } else if (fruit === 'banana') {
    return 'yellow';
  } else {
    return 'orange';
  }
}

const fruitColor: Color = getFruitColor('apple');  // 此处 fruitColor 的类型为 Color，可以是 'red'、'green' 或 'blue'

在上面的例子中，getFruitColor 函数的参数 fruit 被声明为 Fruit 类型，它可以是 'apple'、'banana' 或 'orange' 之一。函数的返回值被声明为 Color 类型，它可以是 'red'、'green' 或 'blue' 之一。

交叉类型

交叉类型要求一个变量同时拥有多个类型的属性。例如，我们可以定义一个名为 Person 的类型，它拥有 name 和 age 属性，并定义一个名为 Employee 的类型，它拥有 company 和 position 属性。我们可以通过交叉类型将这两个类型合并为 EmployeeWithPerson，它同时拥有 Person 和 Employee 的属性。

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

type Employee = {
  company: string;
  position: string;
};

type EmployeeWithPerson = Employee & Person;

const employee: EmployeeWithPerson = {
  name: 'John',
  age: 30,
  company: 'ABC Inc.',
  position: 'Manager',
};

在上述例子中，EmployeeWithPerson 是 Employee 和 Person 的交叉类型，表示同时具有 Employee 和 Person 的属性。employee 变量的类型被声明为 EmployeeWithPerson，可以访问 name、age、company 和 position 属性。

通过使用联合类型和交叉类型，我们可以更灵活地定义变量的类型，使代码更加清晰、易于维护。