TypeScript 是一种静态类型检查的编程语言，它允许开发者在编写 JavaScript 代码时使用类型注解，从而可以在编译时发现一些潜在的错误。在 TypeScript 中，有许多工具和特性都可以帮助我们更加准确地描述代码的类型，其中类型保护 (Type Guards) 就是其中一个非常重要的特性。本文将详细讲解 TypeScript 中的类型保护，包括其概念、应用场景以及具体使用方式和注意事项。
概念和作用
在 TypeScript 中，类型保护指的是一些机制，用于在代码中判断某个变量/属性是否属于某种类型，进而在代码中显式地使用这种类型，以避免类型错误和运行时异常。实现类型保护的方式有很多，比如使用 typeof、instanceof、in、as 等关键字和操作符。一般来说，类型保护的主要作用包括以下几个方面：
提高代码的健壮性和可维护性：通过类型保护，可以避免在运行时出现类型错误和异常，从而提高代码的健壮性；同时，通过显式使用具体的类型或接口，可以使代码更加易于理解和维护。
强化 TypeScript 的静态类型检查功能：TypeScript 的类型检查是在编译时进行的，对于一些复杂的判断、类型转换等操作，编译器很难做到全面准确的检查。而类型保护可以让编译器更好地理解代码的含义和类型，进而提高类型检查的精度和效率。
提高代码的性能：在 JavaScript 中，每个对象都是动态类型的，需要在运行时进行类型检查和类型转换，这可能会降低代码的性能。而 TypeScript 中的类型保护可以在编译时就确定变量的类型，避免了这些运行时开销。
应用场景和具体使用方式
类型保护在实际的开发中非常常见，适用于各种不同的场景。以下是一些典型的应用场景和具体使用方式：
1. typeof 类型保护
typeof 是 JavaScript 中的一个关键字，用于获取变量的类型。在 TypeScript 中，我们可以使用 typeof 给变量做类型保护，代码示例如下：
function print(x: number | string) {
if (typeof x === 'number') {
console.log(x.toFixed(2));
} else if (typeof x === 'string') {
console.log(x.toUpperCase());
}
}上面的代码中，参数 x 可以是一个数字或字符串类型，我们使用 typeof 操作符将其分别判断，然后在代码中分别使用了 toFixed() 和 toUpperCase() 方法。需要注意的是，在这里我们使用了字符串类型的字面量 'number' 和 'string'，这是因为 JavaScript 中存在许多与 typeof 值相关联的特殊行为，比如 typeof null 的值为 'object'，因此在实际使用中需要慎重选择。
2. instanceof 类型保护
instanceof 是 JavaScript 中的一个操作符，用于检查对象是否属于某个特定的类（即是否是某个类的实例）。在 TypeScript 中，我们也可以使用 instanceof 进行类型保护，例如：
-- -------------------- ---- -------
----- --- -
------ -
--------------------
-
-
----- --- -
------ -
--------------------
-
-
-------- ------------- --- - ---- -
-- ---- ---------- ---- -
-----------
- ---- -- ---- ---------- ---- -
-----------
-
-上面的代码中，我们定义了两个类 Dog 和 Cat，分别具有不同的方法。然后我们定义了一个参数 pet，它可以是 Dog 或 Cat 类型的实例，在函数内部使用 instanceof 将其分别判断，从而在代码中显式地使用它们的方法。
3. in 类型保护
in 是 JavaScript 中的一个操作符，用于检查对象是否包含某个属性。在 TypeScript 中，我们也可以使用 in 完成类似的类型保护任务，例如：
-- -------------------- ---- -------
--------- ------ -
----- ---------
------- -------
-
--------- ------ -
----- ---------
----------- -------
-
---- ----- - ------ - -------
-------- ------------------ ------ -
-- --------- -- ------ -
------ ------- - ------------ -- --
- ---- -- ------------- -- ------ -
------ ---------------- -- --
-
-上面的代码中，我们定义了两个接口 Circle 和 Square，分别表示圆和正方形。然后我们使用联合类型 Shape 表示这两种几何图形。在函数 computeArea() 中，我们使用 in 操作符来判断变量 shape 是否包含属性 radius 或 sideLength，从而在代码中分别计算它们的面积。需要注意的是，在这里我们使用了字符串类型的字面量 'circle' 和 'square'，它们与接口的属性 kind 相关联。这是一种常见的约定，用于在代码中表达变量的具体类型。
4. as 类型保护
as 是 TypeScript 中的一个操作符，用于进行类型断言，也可以用于类型保护。在一些特定的情况下，我们需要手动告诉 TypeScript 编译器某个变量的具体类型，这时可以使用 as 操作符，例如：
-- -------------------- ---- -------
--------- ------ -
----- -------
---- -------
--------- -------
-
-------- ------------------- ------- -
-------------------------
------------------------
-------------------------- -- -------- -- ---------
-上面的代码中，我们定义了一个接口 Person，表示一个人的基本信息，其中 address 属性是可选的。在函数 printPerson() 中，我们使用 console.log() 输出了 name、age 和 address 三个属性的值，需要注意的是，因为 address 属性是可选的，所以 TypeScript 会认为它推导出来的类型是 string | undefined，而我们实际上知道这里的值一定是字符串类型，因此我们需要手动使用 as 操作符告诉 TypeScript 具体的类型。这是一种有风险的操作，需要仔细考虑和处理类型错误的情况。
注意事项和推荐做法
使用类型保护可以让代码更加具有健壮性和可读性，但是也有一些需要注意的事项和推荐做法。以下是一些常见的问题和解决方案：
避免滥用类型断言：在某些情况下，我们可能需要手动告诉 TypeScript 编译器某个变量的具体类型，这时可以使用
as操作符进行类型断言。但是，滥用类型断言可能会导致代码出现类型错误和异常，因此我们需要慎重使用，尽可能地通过类型保护来替代类型断言。多重类型保护的顺序和条件：在代码中可能会出现多重类型保护的情况，需要注意它们的顺序和条件。通常来说，我们应该尽可能地将范围更小的类型判断放在前面，以便更准确地进行类型匹配和类型缩小。
使用字面量类型和枚举类型：在使用类型保护时，可以使用字面量类型和枚举类型来表示特定的值和类型。这样可以让类型更加具体和清晰，便于代码的理解和维护。
总结
在 TypeScript 中，类型保护是一种非常重要的特性，它可以帮助我们更加准确地描述代码的类型，降低代码出现类型错误和异常的风险，提高代码的健壮性和可维护性。本文介绍了类型保护的概念、作用、应用场景和具体使用方式，同时提出了一些注意事项和推荐做法。希望读者能够深入理解 TypeScript 中的类型保护，并在实际的开发中加以应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/664c562fd3423812e4b248d0