TypeScript 是一种强类型的 JavaScript 超集，其通过添加类型注解和类型检查功能，使得代码变得更加可靠和易于维护。在 TypeScript 中，我们可以使用类型保护和类型断言技巧来进一步提高代码的可靠性和灵活性。
类型保护
在 TypeScript 中，类型保护是一种用于在运行时验证类型的方法。它可以让我们更加自信地编写代码，确保代码能够处理各种情况。以下是 TypeScript 中常用的几种类型保护技巧：
typeof 类型保护
在 JavaScript 中，我们可以使用 typeof 运算符来获取一个变量的类型。在 TypeScript 中，我们可以使用 typeof 类型保护来检查一个变量的类型。例如：
function double(x: number | string) {
if (typeof x === 'number') {
return x * 2;
} else {
return x + x;
}
}在这个例子中，我们用 typeof 检查了参数 x 的类型，如果 x 是一个数字，我们就将它乘以 2，否则我们将其加倍。
instanceof 类型保护
在 JavaScript 中，我们可以使用 instanceof 运算符来检查一个对象是否是某个类的实例。在 TypeScript 中，我们可以使用 instanceof 类型保护来检查一个对象的类型。例如：
-- -------------------- ---- -------
----- ------ -
----- -------
---- -------
-
----- ------ -
----- -------
----- -------
-
-------- ------------ ------ - ------- -
-- -- ---------- ------- -
---------------------- -- -------- ----- -------
- ---- -
---------------------- --- --------- --------
-
-在这个例子中，如果参数 p 是 Person 类型的实例，我们就输出 p 的姓名和年龄，否则我们就输出 p 的姓名和腿的数量。
自定义类型保护
除了使用 typeof 和 instanceof 进行类型保护外，我们还可以使用自定义类型保护。自定义类型保护是一种使用函数来检查参数类型的方法。例如：
-- -------------------- ---- -------
--------- ---- -
----- -------
---- -- -- -----
-
--------- ---- -
----- -------
----- -- -- -----
-
-------- ----------- ---- - ------ --- -- ---- -
------ ---- -- --------- --- ----------
-
-------- ------------- ---- - ----- -
-- ------------- -
------------------------ --- -------
----------
- ---- -
------------------------ --- --------
-----------
-
-在这个例子中，我们定义了一个 isBird 函数，并使用 pet is Bird 语法来进行自定义类型保护。在 printPet 函数中，我们使用 isBird 函数来检查 pet 是否是 Bird 类型的实例。如果是，我们就输出它的名字并调用它的 fly 方法，否则我们就输出它的名字并调用它的 swim 方法。
类型断言
类型断言是一种在编译时告诉 TypeScript 编译器一个变量的类型的方法。它可以让我们使用一些类型检查器无法推断出来的类型，或者让我们绕过类型检查器的类型检查。以下是 TypeScript 中常用的几种类型断言技巧：
as 语法
在 TypeScript 中，我们可以使用 as 语法来进行类型断言。例如：
const elem = document.getElementById('myElem') as HTMLInputElement;在这个例子中，我们使用 as 语法将 document.getElementById() 方法的返回值断言为 HTMLInputElement 类型。这样，编译器就不会发出类型错误了。
尖括号语法
除了 as 语法外，我们还可以使用尖括号语法来进行类型断言。例如：
const elem = <HTMLInputElement>document.getElementById('myElem');在这个例子中，我们使用尖括号语法将 document.getElementById() 方法的返回值断言为 HTMLInputElement 类型。这种语法在 React 中很常见。
非空断言操作符
在 TypeScript 中，我们还可以使用 ! 非空断言操作符来告诉编译器一个变量不是 null 或 undefined 类型。例如：
function printLength(s: string | null | undefined) {
console.log(s!.length);
}在这个例子中，我们使用非空断言操作符告诉编译器参数 s 不是 null 或 undefined 类型，并输出它的长度。请注意，只有在我们非常确定一个变量不是空值时，才应该使用非空断言操作符，否则它可能会导致运行时错误。
结论
在 TypeScript 中，类型保护和类型断言技巧是编写可靠和灵活的代码的重要工具。我们可以使用 typeof、instanceof 和自定义类型保护来实现类型保护，使用 as、尖括号和非空断言操作符来进行类型断言。当我们懂得了这些技巧之后，我们就能更好地利用 TypeScript 的类型系统来提高代码质量和生产效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bcd3ad657e1f70dbf2def