在 TypeScript 中，类型守卫是一个非常重要的概念，它可以帮助我们在编写代码时更好地处理类型错误，以及提高代码的可读性和可维护性。本文将详细介绍 TypeScript 中的类型守卫，包括其定义、使用场景、常见问题及解决方案，并提供示例代码和指导意义。
什么是类型守卫
在 TypeScript 中，类型守卫是一种机制，用于在运行时判断变量的类型，并根据类型执行不同的代码。它可以帮助我们避免类型错误，提高代码的可读性和可维护性。
具体来说，类型守卫可以通过以下几种方式实现：
typeof 类型守卫
使用 typeof 操作符可以判断变量的类型，如下所示：
-- -------------------- ---- -------
-------- ----------------- ------ - ------- -
-- ------- ----- --- --------- -
---------------------------------
- ---- -
------------------------------
-
-
-------------------- -- -----
---------------------- -- ----在上面的例子中，我们定义了一个函数 printValue，它接受一个 string 或 number 类型的参数 value。在函数内部，我们使用 typeof 操作符判断 value 的类型，如果是 string 类型，则调用 toUpperCase 方法将其转换为大写字母，否则调用 toFixed 方法将其转换为带两位小数的字符串。
instanceof 类型守卫
使用 instanceof 操作符可以判断变量是否属于某个类的实例，如下所示：
-- -------------------- ---- -------
----- ------ --
----- --- ------- ------ --
-------- ------------------- ------- -
-- ------- ---------- ---- -
----------------- -- - ------
- ---- -
----------------- -- -- ---------
-
-
--------------- ---------- -- ---- -- -- ------
--------------- ------- -- ---- -- - ---在上面的例子中，我们定义了一个 Animal 类和一个 Dog 类，其中 Dog 继承了 Animal。我们还定义了一个函数 printAnimal，它接受一个 Animal 类型的参数 animal。在函数内部，我们使用 instanceof 操作符判断 animal 是否为 Dog 类的实例，如果是，则输出 This is a dog，否则输出 This is an animal。
自定义类型守卫
除了使用 typeof 和 instanceof 操作符外，我们还可以自定义类型守卫，如下所示：
-- -------------------- ---- -------
--------- ------ -
----- -------
---- -------
-
-------- ------------- ----- --- -- ------ -
------ ------ -------- --- -------- -- ------ ------- --- ---------
-
-------- ------------------- ------ - ------- -
-- ------------------ -
------------------ --------------- ---- ----------------
- ---- -
-------------------- ------- ------------
-
-
------------- ----- -------- ---- -- --- -- ----- ------ ---- --
------------------- -- ------- ------- ---在上面的例子中，我们定义了一个接口 Person，它包含 name 和 age 两个属性。我们还定义了一个函数 isPerson，它接受一个任意类型的参数 obj，并返回一个 boolean 类型的值。在函数内部，我们使用 typeof 操作符判断 obj 的属性类型是否符合 Person 接口的定义，如果是，则返回 true，否则返回 false。最后，我们定义了一个函数 printPerson，它接受一个 Person 类型或 string 类型的参数 person。在函数内部，我们使用自定义类型守卫 isPerson 判断 person 的类型，并输出相应的信息。
使用场景
类型守卫在 TypeScript 中有很多使用场景，下面列举了一些常见的例子：
判断数组元素类型
-- -------------------- ---- -------
-------- ------------ ------- - ---------- -
--- ----- - --
--- ------ ------ -- -------- -
-- ------- ------ --- --------- -
----- -- -------
-
-
------ ------
-
------------------- -- ---- ------- -- -在上面的例子中，我们定义了一个函数 sum，它接受一个由 string 或 number 类型组成的数组 numbers。在函数内部，我们使用 typeof 操作符判断数组元素的类型，如果是 number 类型，则累加到 total 变量中。
判断对象属性类型
-- -------------------- ---- -------
--------- ---- -
----- -------
---- -------
-
-------- --------------- ----- -
-- ------- --------- --- -------- -- ------ -------- --- --------- -
------------------ ------------- ---- --------------
-
-
----------- ----- -------- ---- -- --- -- ----- ------ ---- --在上面的例子中，我们定义了一个接口 User，它包含 name 和 age 两个属性。我们还定义了一个函数 printUser，它接受一个 User 类型的参数 user。在函数内部，我们使用 typeof 操作符判断 user 的属性类型是否符合 User 接口的定义，如果是，则输出相应的信息。
判断函数参数类型
-- -------------------- ---- -------
-------- ----------------- ------ - ------- -
-- ------- ----- --- --------- -
---------------------------------
- ---- -- ------- ----- --- --------- -
------------------------------
-
-
-------------------- -- -----
---------------------- -- ----在上面的例子中，我们定义了一个函数 printValue，它接受一个 string 或 number 类型的参数 value。在函数内部，我们使用 typeof 操作符判断 value 的类型，并根据类型执行不同的代码。
常见问题及解决方案
在使用类型守卫时，有一些常见的问题需要注意，并提供以下解决方案：
问题一：类型守卫无法识别对象类型
在使用自定义类型守卫时，有时会遇到无法识别对象类型的问题。例如：
-- -------------------- ---- -------
--------- ------ -
----- -------
---- -------
-
-------- ------------- ----- --- -- ------ -
------ ------ -------- --- -------- -- ------ ------- --- ---------
-
-------- ------------------- ------ - ------- -
-- ------------------ -
------------------ --------------- ---- ----------------
- ---- -
-------------------- ------- ------------
-
-
------------- ----- ------- --- -- ----------- ----- -- ------- -- ---- -- ----- ------- -- --- -------- -- ---- ---------在上面的例子中，我们定义了一个接口 Person，它包含 name 和 age 两个属性。我们还定义了一个函数 isPerson，它接受一个任意类型的参数 obj，并返回一个 boolean 类型的值。在函数内部，我们使用 typeof 操作符判断 obj 的属性类型是否符合 Person 接口的定义，如果是，则返回 true，否则返回 false。最后，我们定义了一个函数 printPerson，它接受一个 Person 类型或 string 类型的参数 person。在函数内部，我们使用自定义类型守卫 isPerson 判断 person 的类型，并输出相应的信息。
但是，当我们尝试传入一个不完整的 Person 对象时，TypeScript 编译器会报错，提示 age 属性缺失。这是因为 TypeScript 编译器无法识别对象的类型，只能根据对象是否符合接口定义来判断类型。
解决方案是使用 TypeScript 中的类型断言，将对象强制转换为 Person 类型，例如：
printPerson({ name: 'Alice' } as Person); // Invalid person: [object Object]使用类型断言时需要注意，如果转换失败，会导致运行时错误。
问题二：类型守卫无法识别联合类型
在使用类型守卫时，有时会遇到无法识别联合类型的问题。例如：
-- -------------------- ---- -------
--------- --- -
----- -------
----- -- -- -----
-
--------- --- -
----- -------
----- -- -- -----
-
-------- ----------------- --- - ---- -
-- ------- ----------- --- ----------- -
--------------
- ---- -- ------- ----------- --- ----------- -
--------------
-
-
----------- ----- -------- ----- -- -- ------------------- --- -- ----------- ------ ---- --- ----- -- ---- ---- - -----在上面的例子中，我们定义了两个接口 Cat 和 Dog，分别表示猫和狗。我们还定义了一个函数 makeSound，它接受一个 Cat 类型或 Dog 类型的参数 animal。在函数内部，我们使用 typeof 操作符判断 animal 的属性类型，并根据类型执行不同的代码。
但是，当我们尝试传入一个只包含 meow 方法的对象时，TypeScript 编译器会报错，提示 bark 属性不存在。这是因为 TypeScript 编译器无法识别联合类型的属性，只能根据属性是否存在来判断类型。
解决方案是使用 TypeScript 中的类型保护，例如：
-- -------------------- ---- -------
-------- ------------- --- - ----- ------ -- --- -
------ ------ ------- -- --------- --- -----------
-
-------- ------------- --- - ----- ------ -- --- -
------ ------ ------- -- --------- --- -----------
-
-------- ----------------- --- - ---- -
-- --------------- -
--------------
- ---- -- --------------- -
--------------
-
-
----------- ----- -------- ----- -- -- ------------------- --- -- ----在上面的例子中，我们定义了两个自定义类型守卫 isCat 和 isDog，它们分别判断 animal 是否为 Cat 类型或 Dog 类型。在函数 makeSound 中，我们使用自定义类型守卫判断 animal 的类型，并执行相应的方法。
示例代码
最后，我们提供一些示例代码，帮助读者更好地理解 TypeScript 中的类型守卫。
示例一：判断变量类型
-- -------------------- ---- -------
-------- ----------------- ------ - ------- -
-- ------- ----- --- --------- -
---------------------------------
- ---- -- ------- ----- --- --------- -
------------------------------
-
-
-------------------- -- -----
---------------------- -- ----示例二：判断对象属性类型
-- -------------------- ---- -------
--------- ---- -
----- -------
---- -------
-
-------- --------------- ----- -
-- ------- --------- --- -------- -- ------ -------- --- --------- -
------------------ ------------- ---- --------------
-
-
----------- ----- -------- ---- -- --- -- ----- ------ ---- --示例三：判断数组元素类型
-- -------------------- ---- -------
-------- ------------ ------- - ---------- -
--- ----- - --
--- ------ ------ -- -------- -
-- ------- ------ --- --------- -
----- -- -------
-
-
------ ------
-
------------------- -- ---- ------- -- -示例四：判断类实例类型
-- -------------------- ---- -------
----- ------ --
----- --- ------- ------ --
-------- ------------------- ------- -
-- ------- ---------- ---- -
----------------- -- - ------
- ---- -
----------------- -- -- ---------
-
-
--------------- ---------- -- ---- -- -- ------
--------------- ------- -- ---- -- - ---示例五：自定义类型守卫
-- -------------------- ---- -------
--------- ------ -
----- -------
---- -------
-
-------- ------------- ----- --- -- ------ -
------ ------ -------- --- -------- -- ------ ------- --- ---------
-
-------- ------------------- ------ - ------- -
-- ------------------ -
------------------ --------------- ---- ----------------
- ---- -
-------------------- ------- ------------
-
-
------------- ----- -------- ---- -- --- -- ----- ------ ---- --
------------------- -- ------- ------- ---指导意义
本文详细介绍了 TypeScript 中的类型守卫，包括其定义、使用场景、常见问题及解决方案，并提供了示例代码和指导意义。通过学习本文，读者可以更好地掌握 TypeScript 中的类型系统，提高代码的可读性和可维护性，减少类型错误的发生。同时，本文也提供了一些实用的技巧和经验，帮助读者更好地应用类型守卫。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67da31a4a941bf71341f2030
