揭秘 TypeScript 中联合类型的多面性：融合多元，妙趣横生！

2023-10-25 10:51:40

1. 联合类型：多种类型的融合

联合类型本质上是一种复合类型，它由一组有序的成员类型组成，这些成员类型可以是任何其他类型，包括基本类型、对象类型、数组类型、函数类型等。联合类型的语法如下：

type UnionType = Type1 | Type2 | ... | TypeN;

例如，以下代码定义了一个名为 Employee 的联合类型，它表示员工的类型可以是 Manager、Engineer 或 Salesperson 中的任何一种：

type Employee = Manager | Engineer | Salesperson;

2. 多态性：灵活多变的类型处理

联合类型的一个主要优势是它可以带来多态性，即代码可以对不同类型的对象执行相同的操作。这是因为编译器会根据联合类型中的所有成员类型来推断出最通用的类型，从而使代码具有更广泛的适用性。

function greetEmployee(employee: Employee): void {
  console.log(`Hello, ${employee.name}!`);
}

const manager = new Manager('Alice', 'Manager');
const engineer = new Engineer('Bob', 'Engineer');
const salesperson = new Salesperson('Carol', 'Salesperson');

greetEmployee(manager); // 输出: Hello, Alice!
greetEmployee(engineer); // 输出: Hello, Bob!
greetEmployee(salesperson); // 输出: Hello, Carol!

3. 兼容性：无缝衔接的不同类型

联合类型还可以提高代码的兼容性。当你在处理不同类型的数据时，联合类型可以允许你使用统一的方式来处理它们，而无需进行显式的类型转换。

function calculateBonus(employee: Employee): number {
  switch (employee.type) {
    case 'Manager':
      return employee.salary * 0.1;
    case 'Engineer':
      return employee.salary * 0.05;
    case 'Salesperson':
      return employee.salary * 0.02 + employee.commission;
  }
}

const manager = new Manager('Alice', 'Manager', 10000);
const engineer = new Engineer('Bob', 'Engineer', 8000);
const salesperson = new Salesperson('Carol', 'Salesperson', 6000, 2000);

console.log(`Manager bonus: ${calculateBonus(manager)}`); // 输出: 1000
console.log(`Engineer bonus: ${calculateBonus(engineer)}`); // 输出: 400
console.log(`Salesperson bonus: ${calculateBonus(salesperson)}`); // 输出: 800

4. 灵活使用：掌控类型，驾驭代码

联合类型为你的代码提供了更多的灵活性，你可以根据需要将不同的类型组合在一起，以满足不同的需求。联合类型可以让你编写出更简洁、更易读和更易维护的代码。

type Result = Success | Error;

interface Success {
  type: 'success';
  data: any;
}

interface Error {
  type: 'error';
  message: string;
}

function handleResult(result: Result): void {
  switch (result.type) {
    case 'success':
      console.log(`Success! Data: ${result.data}`);
      break;
    case 'error':
      console.error(`Error: ${result.message}`);
      break;
  }
}

const successResult: Result = {
  type: 'success',
  data: {
    name: 'Alice',
    age: 25
  }
};

const errorResult: Result = {
  type: 'error',
  message: 'Something went wrong!'
};

handleResult(successResult); // 输出: Success! Data: { name: 'Alice', age: 25 }
handleResult(errorResult); // 输出: Error: Something went wrong!

5. 类型系统：秩序井然的代码王国

联合类型是 TypeScript 类型系统的重要组成部分，它可以帮助你构建更加健壮和可靠的代码。联合类型能够让你清晰地定义不同类型之间的关系，从而使你的代码更加易于理解和维护。

type UserRole = 'admin' | 'editor' | 'viewer';

interface User {
  name: string;
  role: UserRole;
}

function canEditUser(user: User): boolean {
  return user.role === 'admin' || user.role === 'editor';
}

const adminUser: User = {
  name: 'Alice',
  role: 'admin'
};

const editorUser: User = {
  name: 'Bob',
  role: 'editor'
};

const viewerUser: User = {
  name: 'Carol',
  role: 'viewer'
};

console.log(`Can Alice edit users? ${canEditUser(adminUser)}`); // 输出: true
console.log(`Can Bob edit users? ${canEditUser(editorUser)}`); // 输出: true
console.log(`Can Carol edit users? ${canEditUser(viewerUser)}`); // 输出: false