TypeScript - 类型擦除和错误行为？

---

TypeScript 是一种流行的编程语言，它提供了诸如类型检查和类型注解等特性，以帮助开发人员编写更健壮、更易于维护的代码。但是，当 TypeScript 代码编译成 JavaScript 时，类型信息会在称为类型擦除的过程中丢失。这可能导致运行时错误，这些错误难以诊断和修复。

在本文中，我们将探讨 TypeScript 中类型擦除的概念，以及它如何影响我们代码中的错误行为。

类型擦除

类型擦除是在编译期间从程序中删除类型信息的过程。在 TypeScript 中，这意味着当代码编译成 JavaScript 时，我们添加到代码中的类型注解会被删除。这是因为 JavaScript 没有像 TypeScript 这样的类型系统，因此在运行时不需要类型信息。

例如，考虑以下 TypeScript 代码：

function add(a: number, b: number): number {
  return a + b;
}

当此代码编译成 JavaScript 时，生成的代码如下所示：

function add(a, b) {
   return a + b;
}

请注意，类型注解已被删除，只留下函数签名。这意味着在运行时，无法知道a和b的类型，并且传递错误类型参数所导致的任何错误都将在运行时发生。

浏览器或运行时环境被构建为运行 JavaScript 代码而不是 TypeScript 代码。因此，每次我们想要运行 TypeScript 代码时，它都会先被转换为 JavaScript。这个转换过程包括删除类型注解，因此在运行时不会进行任何提供的类型检查。

错误行为

当类型信息被擦除时，原本会被 TypeScript 编译器捕获的错误可能会改为在运行时发生。这可能使得诊断和修复代码中的错误变得更加困难。

示例 1

例如，考虑以下 TypeScript 代码：

function add(a: number, b: number): number {
   return a + b;
}
console.log(`The result of addition operation is: ${add("1", "2")}`);

当此代码编译成 JavaScript 时，类型注解会被删除，错误会被标记到控制台上。

Argument of type 'string' is not assignable to parameter of type 'number'.

上面代码的 JavaScript 代码如下所示：

function add(a, b) {
   return a + b;
}
console.log(`The result of addition operation is: ${add("1", "2")}`);

输出

The result of addition operation is: 12

在运行时，console.log语句将输出"12"，这不是我们期望的结果。这是因为我们向add函数传递了两个字符串而不是两个数字，并且由于类型信息被擦除，该函数能够执行而不会抛出错误。要解决此问题，我们需要添加运行时检查以确保传递给add的参数实际上是数字。

与其他传统的编译器（GCC 或 Clang）不同，TypeScript 编译器 (tsc) 在遇到任何错误（类型相关的错误）时不会停止编译过程。它会继续进行并完成整个代码的编译。它只会将错误标记并显示在控制台上，但会继续进行编译。

示例 2：对象类型检查

由于类型擦除而可能发生的错误行为的另一个示例与对象属性有关。考虑以下 TypeScript 代码：

interface Person {
   name: string;
   age: number;
}

function printInfo(person: Person) {
   console.log(`The name is: ${person.name}`);
   console.log(`The age is: ${person.age}`);
   console.log(`The email is: ${person.email}`);
}

const john = { name: "John", age: 30, email: "[email protected]" };
printInfo(john);

在运行时，printInfo函数仍将执行而不会抛出错误，即使john对象具有Person接口中不存在的额外email属性。如果printInfo函数依赖于Person接口的完整性，这可能会导致意外行为。要解决此问题，我们需要添加运行时检查以确保传递给printName的person参数仅包含Person接口中的一部分属性。

编译后，上述 TypeScript 代码将生成以下 JavaScript 代码：

function printInfo(person) {
   console.log("The name is: ".concat(person.name));
   console.log("The age is: ".concat(person.age));
   console.log("The email is: ".concat(person.email));
}
var john = { name: "John", age: 30, email: "[email protected]" };
printInfo(john);

输出

The name is: John
The age is: 30
The email is: [email protected]

在开发 TypeScript 编译器时，其基本理念是在早期开发阶段标记代码中的任何错误（包括类型和 JavaScript 错误），但仍将其编译成 JavaScript 代码。

示例 3：泛型类型检查

function identity<T>(value: T): T {
   return value;
}
console.log(`The returned value is: ${identity<number>("1")}`);

在此示例中，我们有一个泛型函数identity，它接受类型为T的值并将其原样返回。但是，我们向函数传递了一个字符串而不是数字。

由于类型信息被擦除，该函数能够执行而不会抛出错误，但结果并非我们期望的那样。可以通过添加运行时检查来解决此问题，以确保传递给函数的值实际上是类型T。

编译后，上述 TypeScript 代码将生成以下 JavaScript 代码：

function identity(value) {
   return value;
}
console.log("The returned value is: ".concat(identity("1")));

输出

The returned value is: 1

结论

在使用 TypeScript 时，理解类型擦除是一个重要的概念。它可能导致难以诊断和修复的运行时错误，尤其是在传递错误类型的参数或对象属性与预期接口不匹配时。为了减轻这些错误，务必添加运行时检查以确保代码按预期执行。此外，我们可以使用诸如 TypeScript 的unknown类型和 as 关键字之类的工具来执行类型转换，并确保我们的代码正确处理不同类型的数据。

总之，虽然 TypeScript 提供了强大的类型检查和类型注解来帮助我们编写更好的代码，但了解语言的局限性以及类型擦除如何影响运行时错误行为非常重要。通过添加运行时检查并使用unknown和as等工具，我们可以减轻这些错误并编写更健壮、更易于维护的代码。