揭开 TypeScript 类型窄化的神秘面纱

2023-10-04 12:33:24

在 TypeScript 的世界中，类型扮演着至关重要的角色，赋予变量和表达式精确的类型信息。然而，有时我们需要在运行时进一步缩小类型的范围，这就是类型窄化的用武之地。类型窄化使我们能够动态地确定变量的实际类型，从而为后续的代码提供更准确的类型推论。

联合类型

要理解类型窄化，首先需要了解联合类型。联合类型允许变量同时具有多个可能的类型。例如：

let myVariable: string | number;

在这里，myVariable 可以是字符串类型或数字类型。

类型保护

类型保护用于检查变量是否属于特定的类型。有几种方法可以实现类型保护：

类型谓词： 函数或表达式，用于检查变量是否属于特定的类型。例如：

function isString(value: unknown): value is string {
  return typeof value === "string";
}

instanceof 运算符： 检查变量是否属于某个类的实例。例如：

if (myObject instanceof MyClass) {
  // myObject 是 MyClass 的实例
}

类型断言

类型断言强制将变量转换为特定的类型。它使用以下语法：

let myValue = value as Type;

类型推论

TypeScript 编译器可以根据代码中的上下文推断变量的类型。例如：

let myArray = [1, 2, 3];

编译器将推断出 myArray 是一个包含数字元素的数组类型。

使用类型窄化

现在，让我们看看如何在实践中使用类型窄化：

let myValue: unknown;

if (typeof myValue === "string") {
  // myValue 被窄化为 string 类型
  myValue.toUpperCase();
} else if (typeof myValue === "number") {
  // myValue 被窄化为 number 类型
  myValue.toFixed(2);
}

示例：技术指南

为了进一步说明类型窄化的用法，让我们创建一个技术指南：

// 获取用户输入的字符串
let input = prompt("请输入一个数字：");

// 检查输入是否是一个数字
if (isNaN(input)) {
  // 输入不是数字，抛出错误
  throw new Error("输入必须是一个数字");
} else {
  // 输入是数字，将其转换为数字类型
  let numberInput = parseInt(input);

  // 进行数字运算
  console.log("数字输入：" + numberInput);
  console.log("数字输入的平方：" + numberInput ** 2);
}