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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
JQuery for与each性能比较分析
May 14 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
JQuery实现级联下拉框效果实例讲解
Sep 17 Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 Javascript
vue.js中父组件调用子组件的内部方法示例
Oct 22 Javascript
JavaScript 九种跨域方式实现原理
Feb 11 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
Apr 15 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP @ at 记号的作用示例介绍
2014/10/10 PHP
php数组转成json格式的方法
2015/03/09 PHP
PHP中substr_count()函数获取子字符串出现次数的方法
2016/01/07 PHP
PHP定时任务获取微信access_token的方法
2016/10/10 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
对xmlHttp对象的理解
2011/01/17 Javascript
Javascript原型链和原型的一个误区
2014/10/22 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
利用Python实现命令行版的火车票查看器
2016/08/05 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
详解Django admin高级用法
2019/11/06 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
施工安全责任书
2014/04/14 职场文书
目标责任书范本
2014/04/16 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
小学数学教师研修日志
2015/11/13 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
Java并发编程之Executor接口的使用
2021/06/21 Java/Android
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS