TypeScript 中的联合类型-JavaScript中文网-JavaScript教程资源分享门户

TypeScript 是一种开源的编程语言，它是 JavaScript 的超集，扩展了 JavaScript 的功能，包括更好的静态类型检查、接口、泛型、枚举类型等。在 TypeScript 中，有一种叫做联合类型的概念。本文将详细讲解 TypeScript 中的联合类型，帮助读者更好地理解和应用该特性。

什么是联合类型？

在 TypeScript 中，联合类型指的是一个变量可以被赋予多种不同的类型。这些类型用竖线符号 | 分隔开，它们的含义是 "或者"。比如，我们可以定义一个变量 foo，它可以赋值为字符串或者数值：

let foo: string | number;

这样，foo 可以被赋值为下面两种不同的类型：

foo = "hello";
foo = 42;

在某些情况下，联合类型非常有用，比如当我们需要处理多种不同类型的数据时，那么使用联合类型就能够避免代码重复，提高代码的可维护性和可读性。

联合类型的应用

类型保护

使用联合类型时，我们需要注意类型保护的问题。类型保护是指在代码中判断一个变量的类型，以便编译器可以根据变量的类型进行正确的类型检查和代码推导。以下是一些常见的类型保护方式：

`typeof` 类型保护

使用 typeof 关键字可以检查一个变量的类型。比如我们可以定义一个函数 logValue，根据参数的类型输出不同的结果：

function logValue(value: string | number) {
  if (typeof value === "string") {
    console.log(`The string is ${value.length} characters long.`);
  } else {
    console.log(`The number is ${value.toFixed(2)}.`);
  }
}

`in` 类型保护

使用 in 关键字可以检查一个属性是否存在于一个变量中。比如我们可以定义一个函数 logProperty，根据参数对象的属性输出不同的结果：

-- -------------------- ---- -------
--------- ------ -
  ----- ---------
  ----- -------
-

--------- --------- -
  ----- ------------
  ------ -------
  ------- -------
-

---- ----- - ------ - ----------

-------- ------------------ ------ -
  -- ------- -- ------ -
    ---------------- ------ --- -- ---- -- ------------ -- ------
  - ---- -
    ---------------- --------- --- -- ---- -- -------------- - ----------------
  -
-

类型缩小

使用联合类型时，我们还可以利用类型缩小的方式对变量的类型进行精细化控制。类型缩小是指在代码中逐步缩小一个变量的类型范围，以便于根据这个变量的类型进行正确的类型推导和类型检查。以下是一些常见的类型缩小方式：

类型断言

使用类型断言可以将一个联合类型的变量变为其中某个类型。比如以下代码，我们可以将变量 value 断言为字符串类型：

function getString(value: string | number) {
  return (value as string).toUpperCase();
}

双重断言

使用双重断言可以将一个联合类型的变量变为其中某个类型，同时强制类型检查。比如以下代码，我们可以将变量 value 断言为字符串类型，并强制其未来不能再赋值为数值类型：

let value: string | number = "hello";
let newValue = (value as string) as number; // 编译器会警告

用类型判断进行类型缩小

在代码中可以使用 if 语句对变量的类型进行判断，并在 if 块中缩小变量的类型范围。比如以下代码，我们可以求数组、字符串、对象和数值这四种类型的长度：

-- -------------------- ---- -------
-------- ------------ ------ - ----- - ------ - ------- -
  -- ------- - --- --------- -
    ------ ---------
  -
  -- ------------------ -
    ------ ---------
  -
  -- ------- - --- --------- -
    ------ ----------------------
  -
  ------ --------------------
-

总结

本文详细讲解了 TypeScript 中的联合类型，包括定义、应用、类型保护和类型缩小四个方面。掌握了联合类型，我们可以提高代码的可维护性和可读性。在使用联合类型时，我们需要注意类型保护和类型缩小的问题，以便于正确地进行类型检查和类型推导。希望本文对你有所帮助！

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6467b5e8968c7c53b080d10c

TypeScript 中的联合类型