TypeScript 联合类型

介绍

TypeScript 联合类型（Union Types）是 TypeScript 中的一种高级类型，它允许我们定义一个可以接受多种类型的变量。联合类型使用 | 操作符来连接多个类型，表示变量可以是这些类型中的任意一种。联合类型在处理不确定数据类型或需要接受多种输入类型的场景下非常有用。

使用场景

1. 不确定的数据类型

在开发过程中，我们可能会遇到一些数据，其类型在运行时才能确定。例如，一个函数可能接受字符串或数字作为参数。在这种情况下，我们可以使用联合类型来定义这个参数。

function printId(id: string | number) {
  console.log("ID:", id);
}

printId(101); // ID: 101
printId("202"); // ID: 202

2. 接受多种输入类型

在某些情况下，我们可能希望一个函数或组件能够接受多种类型的输入。例如，一个搜索函数可能接受字符串或字符串数组作为搜索词。这时，联合类型可以很好地满足这一需求。

function search(query: string | string[]) {
  // 搜索逻辑
}

search("TypeScript");
search(["TypeScript", "JavaScript"]);

类型守卫

在使用联合类型时，我们可能需要根据不同的类型执行不同的操作。这时，我们可以使用类型守卫（Type Guards）来确保我们能够正确地处理每种类型。

1. typeof

typeof 是一种常见的类型守卫，它允许我们根据变量的类型来执行不同的操作。

function formatValue(value: string | number) {
  if (typeof value === "string") {
    return `String: ${value}`;
  } else {
    return `Number: ${value}`;
  }
}

console.log(formatValue("Hello")); // String: Hello
console.log(formatValue(123)); // Number: 123

2. instanceof

当我们处理对象时，instanceof 是另一种常用的类型守卫。它允许我们根据对象是否是某个类的实例来执行不同的操作。

class Dog {
  bark() {
    return "Woof!";
  }
}

class Cat {
  meow() {
    return "Meow!";
  }
}

function makeAnimalSound(animal: Dog | Cat) {
  if (animal instanceof Dog) {
    return animal.bark();
  } else {
    return animal.meow();
  }
}

const dog = new Dog();
const cat = new Cat();

console.log(makeAnimalSound(dog)); // Woof!
console.log(makeAnimalSound(cat)); // Meow!