联合类型和交叉类型

联合类型和交叉类型

在TypeScript中,除了基本的类型(如 number、string、boolean 等),我们还可以使用更加高级的类型来描述复杂的数据结构。其中,联合类型和交叉类型就是两个非常有用的高级类型。

联合类型(Union Types)

联合类型允许一个变量可以是多种类型中的任意一种。我们可以使用管道符 | 来表示联合类型。例如:

let myVariable: string | number;
myVariable = "hello"; // 这是可以的
myVariable = 42; // 这也是可以的

在上面的例子中,myVariable 可以是 string 类型,也可以是 number 类型。这在处理不确定类型的数据时非常有用。

联合类型的一个常见应用是处理 API 返回的数据:

interface SuccessResponse {
  status: 'success';
  data: any;
}

interface ErrorResponse {
  status: 'error';
  message: string;
}

type APIResponse = SuccessResponse | ErrorResponse;

function handleAPIResponse(response: APIResponse) {
  if (response.status === 'success') {
    console.log('Success:', response.data);
  } else {
    console.error('Error:', response.message);
  }
}

在这个例子中,我们定义了 SuccessResponse 和 ErrorResponse 两个接口,然后使用联合类型 APIResponse 来描述 API 可能返回的两种响应。在 handleAPIResponse 函数中,我们根据 status 字段来处理不同类型的响应。

交叉类型(Intersection Types)

交叉类型允许我们将多个类型合并成一个新的类型。我们可以使用与号 & 来表示交叉类型。例如:

interface Person {
  name: string;
  age: number;
}

interface Employee {
  job: string;
  salary: number;
}

type PersonEmployee = Person & Employee;

let myPersonEmployee: PersonEmployee = {
  name: 'John',
  age: 30,
  job: 'Software Engineer',
  salary: 80000
};

在上面的例子中,我们定义了 Person 和 Employee 两个接口,然后使用交叉类型 PersonEmployee 来表示一个既是 Person 又是 Employee 的对象。

交叉类型在创建复杂的数据结构时非常有用,比如:

type NamedPoint = { name: string } & { x: number, y: number };

let myNamedPoint: NamedPoint = {
  name: 'Origin',
  x: 0,
  y: 0
};

在这个例子中,NamedPoint 类型同时包含了 name、x 和 y 三个属性。