探索联合类型：让TypeScript更灵活

2023-10-11 14:12:02







## 1. 联合类型：组合的力量
联合类型是指将两种或多种类型组合成一种新的类型。通过使用“|”来实现一个联合类型，如下代码：

```typescript
type Person = {
  name: string;
};

type Student = {
  name: string;
  grade: number;
};

// 联合类型：Person | Student
type PersonOrStudent = Person | Student;

联合类型允许变量同时具有两种或多种类型的属性和方法。这使你可以创建更灵活的代码，并处理不同类型的对象。

2. 类型保护：确保数据的正确性

联合类型中，ts代码提示只能给出共有的方法或者属性。因此，我们需要使用类型保护来确保数据的正确性。类型保护有以下几种常用方式：

类型断言（Type Assertions） ：通过“as”，你可以将联合类型变量强制转换为特定类型。

const personOrStudent: PersonOrStudent = {
  name: "John",
};

// 类型断言
const person = personOrStudent as Person;

// 现在，你可以使用 Person 类型的方法和属性。
console.log(person.name);

** instanceof 操作符** ：该操作符可用于检查变量是否属于某个类型。

const personOrStudent: PersonOrStudent = {
  name: "John",
  grade: 10,
};

if (personOrStudent instanceof Student) {
  console.log("是学生！");
} else {
  console.log("不是学生！");
}

模式匹配（Pattern Matching） ：TypeScript 4.0引入的模式匹配功能，可以更方便地进行类型保护。

const personOrStudent: PersonOrStudent = {
  name: "John",
  grade: 10,
};

switch (personOrStudent) {
  case { grade: number }:
    console.log("是学生！");
    break;
  case { }:
    console.log("不是学生！");
    break;
}

3. 联合类型的灵活运用

联合类型在TypeScript中非常有用。你可以使用联合类型来：

创建更灵活的函数 ：函数可以接受多种类型的参数，并根据参数的类型执行不同的操作。

function greet(personOrStudent: PersonOrStudent) {
  if (personOrStudent instanceof Student) {
    console.log(`你好，${personOrStudent.name}同学！`);
  } else {
    console.log(`你好，${personOrStudent.name}先生/女士！`);
  }
}

处理不同类型的数据 ：你可以使用联合类型来处理来自不同来源的数据，并确保数据的正确性。

const data = [
  { name: "John", age: 30 },
  { name: "Mary", age: 25, occupation: "doctor" },
];

// 处理数据
data.forEach((personOrStudent) => {
  if ("occupation" in personOrStudent) {
    console.log(`职业：${personOrStudent.occupation}`);
  } else {
    console.log("没有职业信息。");
  }
});