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 相关文章推荐
使用JS操作页面表格,元素的一些技巧
Feb 02 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
自己写的Javascript计算时间差函数
Oct 28 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
你未必知道的JavaScript和CSS交互的5种方法
Apr 02 Javascript
javascript写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
JS中自定义定时器让它在某一时刻执行
Sep 02 Javascript
jquery实现类似淘宝星星评分功能有截图
Sep 15 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP中使用数组实现堆栈数据结构的代码
2012/02/05 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
Laravel框架控制器的request与response用法示例
2019/09/30 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
php7 新增功能实例总结
2020/05/25 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
jquery实现div拖拽宽度示例代码
2013/07/31 Javascript
form表单只提交数据而不进行页面跳转的解决方案
2013/09/18 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
理解nodejs的stream和pipe机制的原理和实现
2017/08/12 NodeJs
bootstrap table支持高度百分比的实例代码
2018/02/28 Javascript
详解Python中的相对导入和绝对导入
2017/01/06 Python
python递归函数绘制分形树的方法
2018/06/22 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
让代码变得更易维护的7个Python库
2018/10/09 Python
django中的图片验证码功能
2019/09/18 Python
Python 如何批量更新已安装的库
2020/05/26 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
《识字五》教学反思
2014/03/01 职场文书
益达广告词
2014/03/14 职场文书
产品推广策划方案
2014/05/10 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书