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高级程序设计 事件学习笔记
Sep 10 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
从零学jquery之如何使用回调函数
May 16 Javascript
JavaScript中具名函数的多种调用方式总结
Nov 08 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
浅谈javascript中的数据类型转换
Dec 27 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
vue监听键盘事件的相关总结
Jan 29 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
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
JS动画效果代码3
2008/04/03 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JavaScript中数据结构与算法(一):栈
2015/06/19 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
ionic实现可滑动的tab选项卡切换效果
2020/04/15 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
Javascript循环删除数组中元素的几种方法示例
2017/05/18 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
python实现统计代码行数的方法
2015/05/22 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
django中的图片验证码功能
2019/09/18 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
如何开启linux的ssh服务
2013/06/03 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
销售会计岗位职责
2014/03/15 职场文书
考核工作实施方案
2014/03/30 职场文书
小学生读书活动总结
2014/06/30 职场文书
个人融资协议书
2014/10/02 职场文书
爱国之歌(8首)
2019/09/29 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
redis调用二维码时的不断刷新排查分析
2022/04/01 Redis