在 TypeScript 中，类型保护（type guard）用于判定变量的类型，以便在代码执行过程中安全地使用它们。
本篇文章将向您介绍如何在 TypeScript 中使用类型保护，包括以下几个方面：
- 什么是类型保护
- TypeScript 中的类型保护
- 类型保护的类型
- 如何在 TypeScript 中使用类型保护
1. 什么是类型保护
在 JavaScript 中，变量可能会有许多不同的类型。例如，一个变量可能既可以是一个字符串，也可以是一个数字。通常情况下，我们在使用变量之前都要对它进行类型检查，以确保代码的正确执行。
在 TypeScript 中，类型保护允许我们更加安全地访问变量的属性和方法，尤其是在处理联合类型时。其中，类型保护可以用于判断变量的类型、NULl 或 undefined。
2. TypeScript 中的类型保护
在 TypeScript 中，我们可以通过以下方法来实现类型保护：
- typeof 关键字
- instanceof 运算符
- in 运算符
- 自定义类型保护函数
接下来，我们将逐一介绍这四种类型保护的实现方法。
3. 类型保护的类型
在 TypeScript 中，有几种需要特别考虑的类型保护。下面列出了这些类型保护的类型：
- undefined
- null
- boolean
- number
- string
- symbol
- object
接下来，我们将逐一介绍如何使用这些类型保护。
4. 如何在 TypeScript 中使用类型保护
4.1 使用 typeof 关键字
使用 typeof 关键字可以判断一个变量是什么类型。
例如：
function printSize(x: number | string) {
if (typeof x === 'number') {
console.log(x.toString());
} else if (typeof x === 'string') {
console.log(x.length.toString());
}
}在这个例子中，我们可以看到函数 printSize 接受一个 number 或 string 类型的参数 x。在函数中，我们使用 typeof 关键字来判断 x 的类型，在不同的分支中输出 x 的值。因此，如果传入的参数是一个数字类型，输出数字的字符串表示；如果传入的参数是一个字符串类型，输出字符串的长度。
4.2 使用 instanceof 运算符
使用 instanceof 关键字可以判断一个对象是否是一个类的实例。
例如：
-- -------------------- ---- -------
----- ------ -
----- -------
-
----- -------- ------- ------ -
------- -------
-
-------- -------------- -------- - ------- -
-- -- ---------- --------- -
------------------ - - -------------
- ---- -- -- ---------- ------- -
------------------ - - -----------
-
-在这个例子中，printPerson 函数接受一个 Employee 或 Person 类型的参数 p，并判断实参属于哪个类别。
通过 instanceof 操作符，我们可以在不抛出类型错误的情况下访问 Employee 和 Person 类型的属性和方法。
4.3 使用 in 运算符
使用 in 关键字可以判断一个属性是否存在于一个对象中。
例如：
-- -------------------- ---- -------
--------- ------------ -
------- -------
------- -------
-
-------- ------------------ ------------- -
-- -------- -- ------- -
---------------- ---------
- ---- -
--------------- ---------
-
-在这个例子中，我们可以看到函数 drawSquare 接受一个 SquareConfig 类型的参数 config。在函数中，我们使用 in 关键字来判断 config 是否包含 color 属性。
因此，如果 config 对象具有 color 属性，则绘制的正方形将显示颜色。否则正方形将没有颜色。
4.4 自定义类型保护函数
自定义类型保护函数是一种在 TypeScript 中实现类型保护的灵活方法。
使用自定义类型保护函数可以解决上面提到的其他类型保护无法解决的类型问题。
例如：
-- -------------------- ---- -------
--------- ------ -
------- -------
-
--------- ------ -
----------- -------
-
-------- --------------- ------ - -------- ----- -- ------ -
------ -------- -- ------
-
-------- ----------- ------ - ------- -
-- ----------------- -
----------------------
- ---- -
----------------------
-
-在这个例子中，我们可以看到函数 isCircle 接受一个 Circle 或 Square 类型的参数 shape，并检查该形状是否具有 radius 属性。如果有，则返回 true，否则返回 false。
注意，这里的 shape is Circle 是 TypeScript 的一个语言功能，表示此类型保护函数是一个 “类型谓词 ”，指定返回类型为 shape is Circle 将该函数标记为类型保护函数。
在 draw 函数中，我们传入一个形状，并通过自定义类型保护函数 isCircle 检查该形状是否是圆形。如果是，则输出圆形，否则输出正方形。
结论
在 TypeScript 中，类型保护可以使您的代码更加类型安全。了解什么是类型保护以及如何使用它们可以帮助您在编写代码时更好地了解变量的类型。
本文对 TypeScript 中的类型保护进行了详细的介绍与示例代码，希望能对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674d7de889eced3c403c1975