【译】Typescript 3.9 经常使用新特性一览

Typescript 3.9 新特性一览

• 好消息好消息，3.9 正式版本发布了

相关文章导航

• Typescript 3.7 经常使用新特性一览
• Typescript 3.8 经常使用新特性一览
• Typescript 3.9 经常使用新特性一览

更新什么？概况一览

• 一、优化了 Promise.all 的定义，在 3.7 版本中一些混用 null 或 undefined 的时候的问题已经在 3.9 获得了修复。
• 二、大大的提升了打包速度，微软团队自测的时候 typescript项目的平均编译时间由 26s 缩短到了 10s 左右。
• 三、// @ts-expect-error 新注释的添加
• 四、在条件语句中检测未调用的函数
• 五、编辑器提高
  • 5.1 在 JavaScript 中 CommonJS 的自动引入
  • 5.2 在代码操做的时候正确的保留换行符
  • 5.3 添加快速修复缺失的函数返回表达式
  • 5.4 支持 "Solution Style" tsconfig.json 文件
• 六、一些重大变化
  • 主要是在 TypeScript 定义和书写规范上的改动和修复之前的 bugs

挑几个重点的写一下

一、interface 的优化和 promise.all 使用修复

• 咱们知道在 3.7 版本后面对 promise.all & promise.race 等方法作出了更新，可是也制造出了一个问题。在使用 null & undefined 尤为明显。

nterface Lion {

    roar(): void

}

interface Seal {

    singKissFromARose(): void

}

async function visitZoo(lionExhibit: Promise<Lion>, sealExhibit: Promise<Seal | undefined>) {

    let [lion, seal] = await Promise.all([lionExhibit, sealExhibit]);

    lion.roar(); // uh oh

// ~~~~

// Object is possibly 'undefined'.

}
复制代码

这种行为就很奇怪了，实际上 sealExhibit 当中包含的 undefined，至关因而把 undefined 错误引入了 lion type 当中, 这里是一个错误引用。

固然在最新的 3.9 版本中修复了这个问题。

1.1 全新的 awaited type

• awaited type 主要是对如今的 promise 更好的定义和使用。

预计在 **`3.9`** 发布的，结果微软又跳票了，能够等下一个版本了。

二、TypeScript 打包编译等速度提高

• 这里主要是优化了几个微软的内部项目的性能优化，好比:
  • Typescript 团队发现之前的 Material-ui 与 Styled-Components 等组件会带来极差的编辑 / 编译速度后。主要从联合类型、交叉类型、条件 判断的 type 类型以及各类映射 type 类型的性能问题来优化。 把相关的库编译时间减小了 40% 左右。
  • 根据 Visual Studio Code 团队提供的建议，咱们发如今执行文件重命名时，单是查明哪些导入语句须要更新就要耗去 5 到 10 秒时间。TypeScript 3.9 调整了内部编译器与语言服务缓存文件的查找方式，顺利解决了这个问题。
• 详情能够看看下面这几个 pull request 的具体优化内容
  • github.com/microsoft/T…
  • github.com/microsoft/T…
  • github.com/microsoft/T…
  • github.com/microsoft/T…
  • github.com/microsoft/T…
  • github.com/microsoft/T…

四、在条件语句中检测未调用的函数

• 在 3.7 的时候引入了检测未调用函数错误提示，3.9 作了部分优化

function hasImportantPermissions(): boolean {
    // ...
}

// Oops!
if (hasImportantPermissions) {
// ~~~~~~~~~~~~~~~~~~~~~~~
// This condition will always return true since the function is always defined.
// Did you mean to call it instead?
    deleteAllTheImportantFiles();
}
复制代码

可是，此错误仅适用于if语句中的条件。如今三元条件（即语法）如今也支持此功能。好比 cond ? trueExpr : falseExpr

declare function listFilesOfDirectory(dirPath: string): string[];
declare function isDirectory(): boolean;

function getAllFiles(startFileName: string) {
    const result: string[] = [];
    traverse(startFileName);
    return result;

    function traverse(currentPath: string) {
        return isDirectory ?
        // ~~~~~~~~~~~
        // This condition will always return true
        // since the function is always defined.
        // Did you mean to call it instead?
            listFilesOfDirectory(currentPath).forEach(traverse) :
            result.push(currentPath);
    }
}
复制代码

五、编辑器的提高

5.1 CommonJS 的自动补全

• 新版本的另外一项重大改进，是使用 CommonJS 模块自动导入 JavaScript 文件。
• 在旧版本中，TypeScript 强制要求用户不管使用什么文件，都必须以 ECMAScript 的形式导入，例如：

import * as fs from "fs";
复制代码

• 但在编写 JavaScript 文件时，不少用户并不打算使用 ECMScript 样式模块。很多朋友仍在使用 CommonJS 样式的 require(...) 导入，例如：

const fs = require("fs");
复制代码

TypeScript 如今可以自动检测您所使用的导入类型，保证文件样式简洁而统一。如今有了以下自动引入的功能

const { readFile } = require('fs')
复制代码

5.2 缺失的函数返回值的自动修复功能

• 在某些状况下，咱们可能会忘记返回函数中的最后一条语句的值，尤为是在向箭头函数添加大括号时。

// before
let f1 = () => 42

// oops - not the same!
let f2 = () => { 42 }
复制代码

六、重大改进！

6.1 解析可选链与非 null 断言中的差别

• ypeScript 最近实现了对可选链操做符的支持，但根据广大使用者的反馈，非 null 断言操做符（！）的可选链（？.）行为不符合直觉。

具体来说，在以往的版本中，代码：

foo?.bar!.baz
复制代码

被解释为等效于如下 JavaScript 代码：

(foo?.bar).baz
复制代码

在以上代码中，括号会阻止可选链的“短路”行为；所以若是未定义 foo 为 undefined，则访问 baz 会引起运行时错误。

换句话说，大多数人认为以上原始代码片断应该被解释为在：

foo?.bar.baz
复制代码

中，当 foo 为 undefined 时，计算结果为 undefined。

这是一项重大变化，但咱们认为大部分代码在编写时都是为了考虑新的解释场景。若是您但愿继续使用旧有行为，则可在！操做符左侧添加括号，以下所示：

(foo?.bar)!.baz

参考

• www.typescriptlang.org/docs/handbo…