TypeScript v4.4 有哪些新特性？

1. 混叠条件和判别式的控制流分析

2. catch 块中默认使用未知类型

3. 精确的可选属性类型

4. 类中的静态块

5. 镶嵌提示

6. 抽象属性没有初始化器

7. 性能提升及其他福利

TypeScript 4.4 带来了大量的性能提升以及一些改进的类型检查。作为一名开发者，你可能会对以下列出的一些特性感到兴奋。

1. 混叠条件和判别式的控制流分析

这个功能的名字真是太酷了😄。

本质上，它只是让 TypeScript 能够智能地判断上面求值后的变量类型。

前

function foo(arg: unknown) {
  if (typeof arg === "string") {
    console.log(arg.toUpperCase());
}

现在

function foo(arg: unknown) {
  const argIsString = typeof arg === "string";
  if (argIsString) {
    console.log(arg.toUpperCase());
  }
}

TypeScript 会记住参数 arg 的求值结果及其类型（字符串）。您无需重复进行求值操作。

2. catch 块中默认使用未知类型

我们使用 try-catch 块来处理我们产生的混乱。但是，由于混乱（需要在 catch 块中执行的脏操作）可能来自不同的来源，因此 catch 块中的 Error 参数必须保持弱类型，或者是一个隐式定义的参数。

前

try {
  // Who knows what this might throw...
  executeSomeThirdPartyCode();
} catch (err) {
  // err: any
  console.error(err.message); // Allowed, because 'any'
  err.thisWillProbablyFail(); // Allowed, because 'any' :(
}

在 TSConfig 文件中启用useUnknownInCatchVariables后，catch 块中的 Error 参数类型将变为 any。您将开始看到以下错误：

Property 'message' does not exist on type 'unknown'.
Property 'name' does not exist on type 'unknown'.
Property 'stack' does not exist on type 'unknown'.

后

try {
  // Who knows what this might throw...
  executeSomeThirdPartyCode();
} catch (err) {
  if (err instanceof Error) {
     console.error(err.message);
  }
}

如果您有自定义错误，您可以创建一个类并使其继承 Error 类。

3. 精确的可选属性类型

此功能需要在 TSConfig 中使用`exactOptionalPropertyTypes`标志启用。在 JavaScript 中，读取对象中缺失的属性会返回`undefined`。

目前，如果您定义如下接口：

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

上述接口的等效形式为：

interface Person {
  name: string;
  age?: number | undefined;
}

这意味着，具有属性age但其值为undefined 的对象完全没问题。

const p: Person = {
  name: "Daniel",
  age: undefined, // This is okay by default.
};

但实际上它应该被解释为 Person 类型的对象，必须包含 name 属性，另一个属性 age 是可选的，但如果存在，age必须是number类型。

启用exactOptionalPropertyTypes标志后，您可以放心，如果可选属性是您的对象的一部分，它们将被分配正确的类型值。

PS：这对像我这样的字体控开发者来说太棒了！你也一定要启用它！

4. 类中的静态块

类中的静态块是 ECMAScript 的一项新特性，它可以帮助您为静态成员编写复杂的初始化逻辑。

class Foo {
    static count = 0;

    // This is a static block:
    static {
        if (someCondition()) {
            Foo.count++;
        }
    }
}

你可以把它们想象成静态属性的构造函数😄。

5. 镶嵌提示

当函数参数众多，难以记住参数顺序时，这个功能就非常实用。代码内嵌提示会在代码中显示参数名称和返回类型等有用信息。你可以把它想象成一种友好的“提示文字”。

6. 抽象属性没有初始化器

抽象属性不能有初始值设定项。

abstract class C {
  abstract prop = 1;
  //       ~~~~
  // Property 'prop' cannot have an initializer because it is marked abstract.
}

7. 性能提升及其他福利

幕后进行了许多改进，例如：

• 更快的声明发出（可访问的类的符号）
• 更快的路径规范化（本质上是将 ../../ 转换为正确的路径）
• 如果启用`--strict`标志，增量构建速度会更快。但这肯定会在初期给你带来不少麻烦，如果你的项目很大，清理这些混乱局面也需要花费一些时间！
• 更快的源映射生成速度（请在评论区留言，我们现在需要源映射吗？）
• 更好的拼写建议
• 自动导入显示真实/完整路径

希望您喜欢这篇关于 TypeScript 及其新特性的简短介绍。如果您是个技术爱好者，兴奋得睡不着觉，可以去阅读TypeScript 发行说明。

我运营着一个名为EverydayJavaScript的小型 YouTube 频道。如果你还没因为阅读发布说明而睡着，请务必订阅！

祝您 TypeScript 使用愉快！