精通 TS 文档：巧用类型收窄与类型保护掌控类型世界

前端

2024-02-21 10:57:25

TS文档：类型收窄和类型保护

TypeScript是一门强类型的语言，它可以在编译时检查类型错误。这使得它成为构建健壮且可维护的应用程序的有价值工具。

TypeScript 使用类型系统来跟踪变量和表达式的类型。这允许编译器在编译时捕获许多类型错误。但是，有时 TypeScript 无法确定变量或表达式的类型。这就是类型收窄和类型保护发挥作用的地方。

类型收窄

类型收窄是一种缩小变量或表达式可能值的范围的技术。这可以通过条件语句、模式匹配或类型断言来实现。

条件语句

条件语句是最常见的类型收窄技术。它们允许您根据变量或表达式的值来缩小其类型。

例如，以下代码使用条件语句缩小变量 x 的类型：

let x: unknown;

if (typeof x === "number") {
  // `x` is now known to be a number
}

模式匹配

模式匹配是一种强大的技术，用于缩小具有联合类型的变量或表达式的类型。联合类型是两种或更多类型的组合。

例如，以下代码使用模式匹配缩小变量 x 的类型：

let x: number | string;

switch (typeof x) {
  case "number":
    // `x` is now known to be a number
    break;
  case "string":
    // `x` is now known to be a string
    break;
}

类型断言

类型断言是最不推荐的类型收窄技术。它允许您显式将变量或表达式的类型转换为另一种类型。

例如，以下代码使用类型断言将变量 x 的类型转换为 number：

let x: unknown;

// @ts-ignore
x = x as number;

类型保护

类型保护是一种机制，允许 TypeScript 在编译时识别正在使用的具体类型。这可以通过 instanceof 操作符、in 操作符或自定义类型保护函数来实现。

instanceof 操作符

instanceof 操作符用于检查对象是否属于特定类。

例如，以下代码使用 instanceof 操作符检查 x 是否属于 MyClass 类：

class MyClass {
  // ...
}

let x: unknown;

if (x instanceof MyClass) {
  // `x` is now known to be an instance of `MyClass`
}

in 操作符

in 操作符用于检查属性或方法是否存在于对象中。

例如，以下代码使用 in 操作符检查 x 是否具有 name 属性：

let x: unknown;

if ("name" in x) {
  // `x` is now known to have a `name` property
}

自定义类型保护函数

自定义类型保护函数允许您创建自己的类型保护逻辑。

例如，以下代码创建一个自定义类型保护函数来检查 x 是否是一个数组：

function isArray(x: unknown): x is Array<unknown> {
  return Array.isArray(x);
}

let x: unknown;

if (isArray(x)) {
  // `x` is now known to be an array
}