在前端开发过程中，我们经常需要处理各种数据类型，包括数字、字符串、布尔值、对象等等。在 TypeScript 中，我们可以使用联合类型来处理多种可能的数据类型。
什么是联合类型？
联合类型是指，一个变量可以包含多种类型的值。我们可以使用 | 符号来定义联合类型。例如：
let myVar: string | number; myVar = "hello"; // string 类型 myVar = 123; // number 类型
联合类型的应用场景
联合类型的主要应用场景是在函数参数和返回值的定义上。例如，一个函数可能接受多种类型的参数，或者返回多种类型的值。让我们来看一个示例：
function getLength(input: string | number): number {
if (typeof input === "string") {
return input.length; // string 类型
} else {
return input.toString().length; // number 类型
}
}在这个函数中，我们定义了一个输入参数 input，它可以是字符串或者数字类型。如果 input 是字符串类型，我们返回它的长度；如果它是数字类型，我们将其转换为字符串并返回它的长度。
联合类型的限制
在使用联合类型的过程中，需要注意一些限制。首先，我们不能访问联合类型中的所有类型的特定属性或方法。例如，如果一个变量是 string | number 类型，我们不能对它进行字符串或数字的特定操作：
let myVar: string | number; console.log(myVar.length); // Error: 'length' 属性不是 number 或 string 类型共有的属性
其次，在 TypeScript 中，我们需要使用类型保护来确保变量不会访问到不存在的属性或方法。这个问题也可以通过使用类型谓词来解决。让我们来看一个示例：
-- -------------------- ---- -------
-------- ----------- ----- - -- ------ -
------ ------ - --- ---------
-
-------- ---------------- ------ - -------- ------ -
-- ----------------- -
------ ------------- -- ------ --
- ---- -
------ ------------------------ -- ------ --
-
-在这个函数中，我们使用 isString 函数来检测 input 是否是字符串类型。如果是字符串类型，我们返回它的长度；否则，我们将其转换为字符串并返回它的长度。
联合类型的扩展
在 TypeScript 2.0 中，联合类型得到了扩展。我们可以使用类型别名来缩短联合类型的定义，让它变得更加简洁和易读。例如：
-- -------------------- ---- -------
---- -------------- - ------ - -------
-------- ---------------- ---------------- ------ -
-- ------- ----- --- --------- -
------ ------------- -- ------ --
- ---- -
------ ------------------------ -- ------ --
-
-在这个函数中，我们使用 stringOrNumber 类型别名来表示输入参数可以是字符串或数字类型。
总结
联合类型是 TypeScript 中非常有用的语言特性，它可以帮助我们处理多种可能的数据类型。在使用联合类型时，我们需要注意一些限制，并使用类型保护来确保变量不会访问到不存在的属性或方法。同时，我们也可以使用类型别名来缩短联合类型的定义，让它变得更加简洁和易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6482db8948841e9894238760