深入了解 TypeScript 断言

TypeScript 作为一个基于 JavaScript 的超集，通过引入静态类型检查，为我们的代码带来了可预测性和更高的可维护性。而在很多情况下，由于我们对于某个变量或者表达式的类型进行了精确定义并不等于它在运行时总是符合这个类型。因此，`TypeScript` 允许我们使用断言（Assertion）来确定一个变量的实际类型。本文将从多个方面探讨 `TypeScript` 中的断言，让我们一步一步进行深入了解。

一、产生原因

在日常的开发过程中，我们时常遇到一些特殊的情况，比如：

• 我们需要调用一个不规范的 API，它返回的类型并不符合我们的预期；
• 我们希望针对某个变量强制修改类型；
• 我们需要在运行时临时将某个变量指定为特定的类型。

如果没有断言的话，我们可能需要修改当前变量的类型定义，或者编写多个条件判断分支，这些都会使代码显得繁琐且难以维护。因此，`TypeScript` 中的断言功能对于我们解决这些问题非常有帮助。

二、语法

断言符号可以用作参数和变量，以指定其类型。一般而言，断言符号 as 用于类型断言。

const value: unknown = "Hello World!";
const message: string = (value as string).toUpperCase();
console.log(message);

上面的代码表示我们知道变量 `value` 实际上就是一个字符串，并通过 `as` 操作符对其进行强制转换，然后将其转换为大写并赋值给 `message` 变量。

还有一种类型断言操作符为 angle-bracket，即用 “ 符号括起来的强制类型转换，如下例：

const value: unknown = "Hello TypeScript!";
const message: string = <string>value.toUpperCase();
console.log(message);

但是在 `JSX` 语法中，`angle-bracket` 的括法容易使得代码结构混乱，因此使用 `as` 操作符更为方便和美观。

三、类型推断中的断言

TypeScript 中的类型推断十分强大，但是有些时候由于我们没有对某个变量进行类型限制，编译器会默认它采用 `type any`。因此，在这种情况下，我们需要使用类型断言来明确告诉编译器变量的实际类型。比如：

let value = "Hello!";
let reversedValue = value.split("").reverse().join("");
console.log(reversedValue);

代码中的 `reversedValue` 变量的类型是 `any`。由于类型推断器并不能准确地知道 `split`和 `reverse` 等方法的返回类型，因此它不会对类型进行强制限制。为了明确表示这个变量的类型，我们可以使用类型断言，把它转换为字符串类型。

let value = "Hello!";
let reversedValue = (value as string).split("").reverse().join("");
console.log(reversedValue);

我们使用 `as string` 将当前变量的类型从 `any` 修改为 `string`，这时代码的类型就可以得到编译器的准确推断，以免出现运行时错误。

四、类型守卫与断言联合使用

有时，我们需要在运行时进行一些类型检查，这个时候类型守卫就上场了。类型守卫就是一段逻辑用来判断类型是否为指定类型，可以通过类型守卫改变变量的类型或值。

例如下面的代码，`value` 是一个 `unknown` 类型的变量，使用类型守卫可以在不修改变量类型的情况下进行安全操作。

function getType(value: unknown): string {
  if (typeof value === "string") {
    return "string";
  }
  if (typeof value === "number") {
    return "number";
  }
  if (typeof value === "boolean") {
    return "boolean";
  }
  if (typeof value === "object") {
    return "object";
  }
  if (typeof value === "function") {
    return "function";
  }
  return "";
}

const value: unknown = "Hello!";
console.log(getType(value)); // 输出：string

我们使用 `typeof` 操作符进行类型守卫，如果变量类型符合 `string`、`number`、`boolean`、`object`、`function` 中的一种，就返回相应的字符串，否则返回空。这样，我们不需要进行类型转换和断言操作，就可以得到变量的正确类型。

有时，类型守卫会与类型断言一起使用，以提高代码的可读性和可维护性。例如：

function getType(value: any): string {
  if (Array.isArray(value)) {
    return "array";
  }
  if (typeof value === "string" && value.length > 0) {
    return "string";
  }
  if (typeof value === "object" && value !== null) {
    return "object";
  }
  return "";
}

const value: unknown = "Hello TypeScript!";
const reversedValue = (getType(value) === "string") 
                         ? (value as string).split("").reverse().join("")
                         : "";
console.log(reversedValue);

我们使用 `getType` 方法来判断变量的类型，如果类型符合 `string`，就进行类型断言，否则赋一个空字符串给 `reversedValue` 变量。这样，代码结构清晰，易于阅读。

五、`as const` 的作用

我们可以使用 `as const` 或 “ 提示 TypeScript，这个对象不应该变为 mutable（可变的）。

const myObj = {
  name: "TypeScript",
  version: "4.4.3",
} as const;

myObj.version = "4.5.0"; // 报错

当我们将 `as const` 添加到对象后，该对象中的属性将被推断为只读，这意味着在编译时和运行时均不能更改对象属性的值。这样可以提高代码的可维护性并降低出错的机会。

六、结论

在开发 TypeScript 应用的过程中，我们时常需要进行类型检查和转换。`TypeScript` 提供了强大的类型推断功能，但是有时会产生冗余的代码或无法准确推断某个变量的类型。这个时候，我们可以使用断言技术来强制指定变量的类型，并准确执行类型检查。

本文介绍了 TypeScript 中的断言、类型守卫、`as const` 几种技术，旨在帮助读者更好地理解和掌握 TypeScript，提高代码质量和可维护性。