前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【译】Typescript 3.9 常用新特性一览

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

作者头像
西南_张家辉
发布2021-02-02 10:20:39
1.3K0
发布2021-02-02 10:20:39
举报
文章被收录于专栏:张家辉的树屋

Typescript 3.9 新特性一览

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

相关文章导航

更新什么?概况一览

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

挑几个重点的写一下

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

  • 我们知道在 3.7 版本后面对 promise.all & promise.race 等方法做出了更新,但是也制造出了一个问题。在使用 null & undefined 尤其明显。
代码语言:javascript
复制
interface Lion {

    roar(): void

}

interface Seal {

    singKissFromARose(): void

}

async function visitZoo(lionExhibit: Promise, sealExhibit: Promiseundefined>) {

    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 更好的定义和使用。
代码语言:javascript
复制
预计在 **`3.9`** 发布的,结果微软又跳票了,可以等下一个版本了。

2、TypeScript 打包编译等速度提升

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

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

  • 在 3.7 的时候引入了检测未调用函数错误提示,3.9 做了部分优化
代码语言:javascript
复制
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

代码语言:javascript
复制
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、编辑器的提升

5.1 CommonJS 的自动补全
  • 新版本的另一项重大改进,是使用 CommonJS 模块自动导入 JavaScript 文件。
  • 在旧版本中,TypeScript 强制要求用户无论使用什么文件,都必须以 ECMAScript 的形式导入,例如:
代码语言:javascript
复制
import * as fs from "fs";
  • 但在编写 JavaScript 文件时,很多用户并不打算使用 ECMScript 样式模块。不少朋友仍在使用 CommonJS 样式的 require(...) 导入,例如:
代码语言:javascript
复制
const fs = require("fs");

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

代码语言:javascript
复制
const { readFile } = require('fs')
5.2 缺失的函数返回值的自动修复功能
  • 在某些情况下,我们可能会忘记返回函数中的最后一条语句的值,尤其是在向箭头函数添加大括号时。
代码语言:javascript
复制
// before
let f1 = () => 42

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

6、重大改进!

6.1 解析可选链与非 null 断言中的差异
  • TypeScript 最近实现了对可选链操作符的支持,但根据广大使用者的反馈,非 null 断言操作符(!)的可选链(?.)行为不符合直觉。

具体来讲,在以往的版本中,代码:

代码语言:javascript
复制
foo?.bar!.baz

被解释为等效于以下 JavaScript 代码:

代码语言:javascript
复制
(foo?.bar).baz

在以上代码中,括号会阻止可选链的“短路”行为;因此如果未定义 fooundefined,则访问 baz 会引发运行时错误。

换句话说,大多数人认为以上原始代码片段应该被解释为在:

代码语言:javascript
复制
foo?.bar.baz

中,当 fooundefined 时,计算结果为 undefined

这是一项重大变化,但我们认为大部分代码在编写时都是为了考虑新的解释场景。如果您希望继续使用旧有行为,则可在!操作符左侧添加括号,如下所示:

(foo?.bar)!.baz

参考

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 相关文章导航
    • 更新什么?概况一览
      • 挑几个重点的写一下
        • 1、interface 的优化和 promise.all 使用修复
          • 1.1 全新的 awaited type
            • 2、TypeScript 打包编译等速度提升
              • 4、在条件语句中检测未调用的函数
                • 5、编辑器的提升
                  • 5.1 CommonJS 的自动补全
                  • 5.2 缺失的函数返回值的自动修复功能
                • 6、重大改进!
                  • 6.1 解析可选链与非 null 断言中的差异
              • 参考
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档