TypeScript 4.0的新增功能

TypeScript has announced its latest version of TypeScript today (20th of August, 2020) and I thought of doing a quick recap on its features and changes. With this release, TypeScript brings the final, stable version of their latest update. Although this brings a new major version, there are no more substantially large, breaking changes than usual. So let’s see what’s new in this version.

TypeScript今天(2020年8月20日)发布了最新版本的TypeScript，我想快速回顾一下其功能和更改。 在此版本中，TypeScript带来了其最新更新的最终稳定版本。 尽管这带来了新的主要版本，但没有比以往更大的重大更改。 因此，让我们看看此版本中的新增功能。

标记的元组元素 (Labeled Tuple Elements)

This language feature changes the way a tuple is defined. Previously, tuples were defined as follows:

此语言功能更改了元组的定义方式。 以前，元组的定义如下：

function tuple(...args: [string, number]): void {
    // ...
}

In the above example, there are no parameter names for the first and second elements. While these have no impact on type-checking, the lack of labels on tuple positions can make them harder to use — harder to communicate our intent. (source: devblogs.microsoft.com)

在上面的示例中，第一个和第二个元素没有参数名称。 尽管这些对类型检查没有影响，但元组位置上缺少标签会使它们更难使用，也更难以传达我们的意图。 (来源： devblogs.microsoft.com )

As a solution to this, TypeScrip 4.0 brings tuples with labels.

作为对此的解决方案，TypeScrip 4.0带有标签的元组。

type Segment = [length: number, count: number];

But if you are going to label an element, you must label all the elements in the tuple. If not, you will receive an error.

但是，如果要标记元素，则必须标记元组中的所有元素。 如果没有，您将收到一个错误。

type Segment = [first: string, number];
//                         ~~~~~~
// error! Tuple members must all have names or all not have names.

构造函数的类属性推断 (Class Property Inference From Constructors)

If we configure TypeScript in noImplicitAny mode, TypeScript 4.0 can use control flow analysis to determine the types of properties in classes.

如果我们以noImplicitAny模式配置TypeScript， TypeScript 4.0可以使用控制流分析来确定类中属性的类型。

class Test {    
   x;    
   constructor(b: boolean){      
     if(b){        
       this.x = 'hello'      
     } else {        
       this.x = 42;      
     }    
   }
}

In previous versions of TypeScript, the above code will result in an error. But version 4.0 will compile and TypeScript will infer the type of x to be string or number.

在早期版本的TypeScript中，以上代码将导致错误。 但是将编译版本4.0，并且TypeScript将推断x的类型为string 或number 。

短路分配运算符 (Short-Circuiting Assignment Operators)

I’m sure you must have seen compound assignment operators in many languages. Compound assignment operators apply an operator to two arguments and then assign the result to the left side. Here are some examples:

我确定您一定已经看过多种语言的复合赋值运算符。 复合赋值运算符将一个运算符应用于两个参数，然后将结果赋给左侧。 这里有些例子：

According to Typescript team,

根据Typescript团队的说法，

But there are three notable exceptions: logical and (&&), logical or (||), and nullish coalescing (??). TypeScript is ready to fill these gaps with the 4.0 release by introducing three new assignment operators: &&=, ||=, and ??=. (source: devblogs.microsoft.com)

但是有三个值得注意的例外：逻辑和 ( && )，逻辑或 ( || )和无效合并( ?? )。 TypeScript准备通过引入三个新的赋值运算符： &&= ， ||=和??=来填补4.0版本中的这些空白。 (来源： devblogs.microsoft.com )

a ||= b;// This will be equal toa || (a = b);

“捕获”子句绑定中的“未知” (‘unknown’ on ‘catch’ Clause Bindings)

From the beginning of TypeScript, catch clause variables were always typed as any, which means that TypeScript allowed you to do anything you wanted with them.

从TypeScript开始， catch子句变量始终被键入any ，这意味着TypeScript允许您对它们执行任何操作。

try {
  throw 20;
} catch (err) {
  console.error(err.specialFunction()); 
}

In the example above, the type of error is any, and it is not type-safe due to that. Typescript 4.0 has a solution for this,

在上面的示例中，错误的类型为any ，因此它不是类型安全的。 Typescript 4.0为此提供了解决方案，

TypeScript 4.0 now lets you specify the type of catch clause variables as unknown instead. unknown is safer than any because it reminds us that we need to perform some sorts of type-checks before operating on our values. (source: devblogs.microsoft.com)

现在，TypeScript 4.0允许您将catch子句变量的类型指定为unknown 。 unknown比any unknown都更安全，因为它提醒我们在对值进行运算之前，我们需要执行某种类型检查。 (来源： devblogs.microsoft.com )

使用'--noEmitOnError'可以提高构建模式下的速度 (Speed Improvements in Build Mode With ‘--noEmitOnError’)

In previous versions, compiling a program after a previous compile with errors under --incremental would be extremely slow when using the --noEmitOnError flag because none of the information from the last compilation would be cached in a .tsbuildinfo file based on the --noEmitOnError flag.

在以前的版本中，使用--noEmitOnError标志时，在先前编译之后在--incremental下出现错误的情况下编译程序将非常慢，因为来自上次编译的信息都不会缓存在基于--noEmitOnError的.tsbuildinfo文件中--noEmitOnError标志。

In TypeScript 4.0, this has been changed and now you will get a great speed boost in these scenarios.

在TypeScript 4.0中，此更改已更改，现在您可以在这些情况下大大提高速度。

'--incremental'与'--noEmit' (‘--incremental’ With ‘--noEmit’)

TypeScript 4.0 allows using the --noEmit flag when while still leveraging --incremental compiles. This was previously not allowed, as --incremental needs to emit a .tsbuildinfo files.

当仍利用- --incremental编译时，TypeScript 4.0允许使用--noEmit标志。 以前不允许这样做，因为--incremental需要发出.tsbuildinfo文件。

编辑器改进 (Editor Improvements)

Typescript has been a great companion for the number of editors and with the new release, they have broadened their limitations.

Typescript是许多编辑器的绝佳伴侣，并且随着新版本的发布，他们扩大了限制。

TypeScript compiler doesn’t only power the editing experience for TypeScript itself in most major editors — it also powers the JavaScript experience in the Visual Studio family of editors and more. (source:devblogs.microsoft.com)

TypeScript编译器不仅可以增强大多数主要编辑器中TypeScript本身的编辑体验，而且还可以增强Visual Studio系列编辑器等中JavaScript体验。 (来源： devblogs.microsoft.com )

You can check out a partial list of editors that have support for TypeScript to learn more about whether your favorite editor has support to use new versions.

您可以查看支持TypeScript的部分编辑器列表，以了解有关您喜欢的编辑器是否支持使用新版本的更多信息。

Also, TypeScript’s editing support now recognizes when a declaration has been marked with a /** @deprecated * JSDoc comment.

此外，TypeScript的编辑支持现在可以识别何时使用/** @deprecated * JSDoc注释标记声明。

Partial Semantic Mode at Startup is another experimental feature that has been included in TypeScript 4.0. They say that this will be a solution for the slow loading time in many projects. This new mode for editors will provide a partial experience until the full language service experience has loaded up. Normally a project will take from 20 to 60 seconds until TypeScript becomes fully responsive and this new mode will decrease it down to seconds.

启动时的部分语义模式 是TypeScript 4.0中包含的另一个实验功能。 他们说这将是许多项目中缓慢加载时间的解决方案。 这种新的编辑器模式将提供部分体验，直到完整的语言服务体验得到加载为止。 在TypeScript完全响应之前，项目通常需要20到60秒，而这种新模式会将项目减少到几秒钟。

Currently, the only editor that supports this mode is Visual Studio Code Insiders. You can try it out by following these steps.

当前，唯一支持此模式的编辑器是Visual Studio Code Insiders 。 您可以按照以下步骤尝试。

1. Instal Visual Studio Code Insiders.

   安装Visual Studio代码内部人员 。

2. Configure Visual Studio Code Insiders to use the beta or install the JavaScript and TypeScript Nightly Extension for Visual Studio Code Insiders.

   将Visual Studio Code Insiders配置为使用Beta或为Visual Studio Code Insiders安装JavaScript和TypeScript Nightly Extension 。

3. Open your JSON settings view: > Preferences: Open Settings (JSON).

   打开JSON设置视图： > Preferences: Open Settings (JSON) 。

4. Add the following lines:
   添加以下行：

// The editor will say 'dynamic' is an unknown option, // but don't worry about it for now. It's still experimental. "typescript.tsserver.useSeparateSyntaxServer": "dynamic",

// The editor will say 'dynamic' is an unknown option, // but don't worry about it for now. It's still experimental. "typescript.tsserver.useSeparateSyntaxServer": "dynamic",

Apart from the above features TypeScript 4.0 contains many new features like Custom JSX factories, Varadic tuple elements, etc and you can find them in there official web site as well. Also, If you like to test this latest version with your projects:

除了上述功能之外，TypeScript 4.0还包含许多新功能，例如Custom JSX工厂，Varadic元组元素等，您也可以在官方网站上找到它们。 另外，如果您想在项目中测试此最新版本，请执行以下操作：

• You can use npm install -D typescript.

  您可以使用npm install -D typescript 。

• You can get it through NuGet.

  您可以通过NuGet获取它。

翻译自: https://medium.com/better-programming/whats-new-in-typescript-4-0-b8513c38fd20