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 相关文章推荐
javascript编程起步(第二课)
Feb 27 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
May 24 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
js监听鼠标点击和键盘点击事件并自动跳转页面
Sep 24 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
vuex入门最详细整理
Mar 04 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
PHP的加密方式及原理
2012/06/14 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
PHP中的使用curl发送请求(GET请求和POST请求)
2017/02/08 PHP
javascript document.execCommand() 常用解析
2009/12/14 Javascript
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
动感效果的TAB选项卡jquery 插件
2011/07/09 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
2015/10/19 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
[00:48]完美“圣”典2016风云人物:xiao8宣传片
2016/11/30 DOTA
Python设计模式之单例模式实例
2014/04/26 Python
Python中SOAP项目的介绍及其在web开发中的应用
2015/04/14 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Python 通过requests实现腾讯新闻抓取爬虫的方法
2019/02/22 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Python建造者模式案例运行原理解析
2020/06/29 Python
在 Windows 下搭建高效的 django 开发环境的详细教程
2020/07/27 Python
html5 canvas 使用示例
2010/10/22 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
印尼披萨外送专家:Domino’s Pizza印尼
2017/12/28 全球购物
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
别名指示符是什么
2012/10/08 面试题
趣味活动策划方案
2014/02/08 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
活动总结书怎么写
2015/05/11 职场文书
《自己去吧》教学反思
2016/02/16 职场文书
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang