Typescript3.9 常用新特性一览(推荐)


Posted in Javascript onMay 14, 2020

更新什么?概况一览

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 尤其明显。

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`** 发布的,结果微软又跳票了,可以等下一个版本了。

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

这里主要是优化了几个微软的内部项目的性能优化,比如:

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

详情可以看看下面这几个 pull request 的具体优化内容

https://github.com/microsoft/TypeScript/pull/36576
https://github.com/microsoft/TypeScript/pull/36590
https://github.com/microsoft/TypeScript/pull/36607
https://github.com/microsoft/TypeScript/pull/36622
https://github.com/microsoft/TypeScript/pull/36754
https://github.com/microsoft/TypeScript/pull/36696

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

在 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、编辑器的提升

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、重大改进!

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

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

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

foo?.bar!.baz

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

(foo?.bar).baz

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

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

foo?.bar.baz

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

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

(foo?.bar)!.baz

参考

https://www.typescriptlang.org/docs/home.html

到此这篇关于Typescript3.9 常用新特性一览(推荐)的文章就介绍到这了,更多相关Typescript3.9 新特性内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木! 

Javascript 相关文章推荐
JQuery动画和停止动画实例代码
Mar 01 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
jsonp原理及使用
Oct 28 Javascript
extjs 分页使用jsp传递数据示例
Jul 29 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
基于WebUploader的文件上传js插件
Aug 19 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
详解Angular 4.x Injector
May 04 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
vue点击按钮实现简单页面的切换
Sep 08 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 #Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 #Javascript
JavaScript, select标签元素左右移动功能实现
May 14 #Javascript
vue实现商品列表的添加删除实例讲解
May 14 #Javascript
Vue 自适应高度表格的实现方法
May 13 #Javascript
ES6函数实现排它两种写法解析
May 13 #Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 #Javascript
You might like
谈一谈收音机的高放电路
2021/03/02 无线电
乐信RP2100的电路分析和打磨
2021/03/02 无线电
php中文字符截取防乱码
2008/03/28 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
2015/09/20 PHP
php英文单词统计器
2016/06/23 PHP
Yii2数据库操作常用方法小结
2017/05/04 PHP
PHP实现简单用户登录界面
2019/10/23 PHP
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
JS实现动态给图片添加边框的方法
2015/04/01 Javascript
ES6的新特性概览
2016/03/10 Javascript
onclick和onblur冲突问题的快速解决方法
2016/04/28 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
详解 vue.js用法和特性
2017/10/15 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
详解Axios 如何取消已发送的请求
2018/10/20 Javascript
React降级配置及Ant Design配置详解
2018/12/27 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python笔记(叁)继续学习
2012/10/24 Python
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python基本语法练习实例
2017/09/19 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
Python while循环使用else语句代码实例
2020/02/07 Python
python实现udp传输图片功能
2020/03/20 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
毕业设计答辩开场白
2015/05/29 职场文书