0003、详解TS的联合类型

在 TypeScript 中，联合类型是一种非常强大的特性，它允许你将多个类型组合成一个类型。这意味着你声明的变量或参数可以接受定义在联合类型中的任何一种类型的值。联合类型通过使用管道符号（|）连接多个类型来定义。

使用联合类型

联合类型常用于那些可以接受多种数据类型的场合。例如，一个函数参数可以是数字或字符串：

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

在这个例子中，id 参数可以是 number 或 string 类型，这意味着你可以安全地将数字或字符串传递给 printId 函数。

联合类型的特点

• 类型安全: 使用联合类型可以确保变量在赋值时仅限于指定的类型，从而增加了代码的类型安全性。
• 灵活性: 联合类型提供了一种灵活的方式来表达一个值可以是几种不同类型中的任何一种。
• 类型推断: TypeScript 的类型推断机制在处理联合类型时表现得非常智能。在联合类型的上下文中使用变量时，TypeScript 会根据当前的代码路径尝试推断出最具体的类型。

联合类型的使用限制

当你使用联合类型时，只能访问所有类型共有的成员。例如：

function printLength(obj: string | Array<string>) {
  // 错误: 不确定类型是否包含 'length'
  // console.log(obj.length); // Error

  // 正确: 使用类型断言
  console.log((obj as string).length); // 正确，但需要确保类型安全
}

为了安全地使用不是所有类型共有的属性或方法，你可能需要使用类型断言或类型守卫。

类型守卫

类型守卫允许你在条件语句块中安全地区分联合类型的不同类型。TypeScript 会根据这些检查缩小类型的范围：

function printId(id: number | string) {
  if (typeof id === "string") {
    // 这里 id 被推断为 string 类型
    console.log(id.toUpperCase());
  } else {
    // 这里 id 被推断为 number 类型
    console.log(id);
  }
}

结论

联合类型是 TypeScript 提供的一种非常灵活且强大的特性，使得变量可以安全地处理多种类型的值。通过结合使用类型守卫和类型断言，你可以在保持类型安全的同时，充分利用联合类型带来的便利和灵活性。