TypeScript 中的联合类型，允许我们将多个类型组合成一个类型，以表示一个变量可以是多种类型之一。本文将介绍 TypeScript 中联合类型的用法和实践经验。
什么是联合类型
联合类型是指一个变量可以拥有多种类型，它是 TypeScript 中的高级类型。举个例子，假设我们有一个类型为 string | number 的变量，那么这个变量可以是字符串，也可以是数字。
下面是一个简单的例子：
let value: string | number; value = "Hello World"; // OK value = 42; // OK value = true; // Error，布尔类型不是 string 或 number 类型的一种
通过使用 | 来组合多个类型，我们可以定义一个联合类型。这个联合类型声明变量可以是这个联合类型所包含的任何一种类型中的一种。
联合类型的使用场景
联合类型常常使用在那些类型不确定的场景中，例如一个函数可能接收不同类型的参数，或者一个变量在不同的情况下可能拥有不同的类型。
下面是一个函数接收不同类型参数的例子：
function showInfo(value: string | number) {
console.log(`The value is ${value}`);
}
showInfo("Hello World"); // The value is Hello World
showInfo(42); // The value is 42联合类型可以让我们在这里声明一个参数既可以是字符串也可以是数字，而不需要单独写两个函数。这个函数可以处理更多类型的参数，极大地提高了代码的灵活性。
下面是一个变量可能拥有不同类型的例子：
-- -------------------- ---- -------
---- ------ - - -------- ------- - - - ------ ------ --
-------- -------------------- ------- -
-- ---------------- -
------------------------
- ---- -
----------------------------
-
-
-------------- -------- ---- --- -- --------
-------------- ------ ---------- ---- ------- --- -- --------- ---- ------在这个例子中，Result 类型可以是 { success: boolean } 或者 { error: string }。handleResult 函数可以接收一个 Result 类型的参数，并进行相应的处理。
联合类型的实践经验
使用联合类型需要注意以下几个实践经验：
1. 顺序很重要
在使用联合类型时，它们的顺序非常重要。因为 TypeScript 按照代码中的顺序解析联合类型，如果我们把 string 放在 number 前面，那么 TypeScript 就会认为这个联合类型只包含字符串类型。
let value: number | string; value = 42; // OK value = "Hello World"; // OK value = true; // Error
let value: string | number; value = 42; // OK value = "Hello World"; // OK value = true; // Error
2. 使用 type 和 interface 声明联合类型
当我们需要多次使用联合类型时，我们可以使用 type 或 interface 声明一个新的类型别名，以提高代码的可读性。
-- -------------------- ---- -------
---- ------ - ----- - ----- - --------
-------- ---------------- ------- -
-------------------
-
----------------- -- ---
------------------- -- -----
------------------ -- -----3. 使用 typeof 操作符
使用 typeof 操作符可以获取一个变量的类型，这可以帮助我们动态地创建一个联合类型。
-- -------------------- ---- -------
----- ------- - ------ -------
---- ------ - ------ -------- -- ------ - ------
-------- ---------------- ------- -
-------------------
-
---------------- -------- -- ----- -----总结
通过本文的介绍，我们了解了 TypeScript 中联合类型的用法和实践经验。联合类型在定义变量类型不确定、函数接收不同类型参数等场景中常常发挥作用，并且在实际开发中，通过优雅地使用 type、interface、typeof 等技巧，可以帮助我们提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0c0dc48841e9894cdae5d