TypeScript 3.7 发布了,此版本带来了许多新特性。

Optional Chaining

首先一大亮点是 Optional Chaining,这是社区呼唤特别强烈的一个 ECMAScript 特性。最初它是 TypeScript 的 issue 跟踪器上第 16 个 issue,于 5 年前提交,要知道目前总共有多达 23000 个 issue。当时 TC39 还没有正式提案,这些年来开发者一直要求实现该特性,但是为了不与 ECMAScript 建议冲突,迟迟没有实现,相反 TS 开发团队一直在帮助推动该提案实现标准化,并最终推及所有 JavaScript 与 TypeScript 开发者。

Optional Chaining 特性主要用于保护出现在属性路径中 null 和 undefined 值,像 C# 等语言中已经有用于访问属性链的语法糖,可以在对象层次结构中的任何地方处理遇到的 null 和 undefined 情况,使它可以正常执行,而不会抛出错误。

具体来讲,在向树状结构深处进行属性值访问时,通常需要检查中间节点是否存在:

var street = user.address && user.address.street;

许多 API 返回一个对象或 null/undefined,并且可能只想在结果不为 null 时从结果中提取属性:

var fooInput = myForm.querySelector('input[name=foo]')
var fooValue = fooInput ? fooInput.value : undefined

Optional Chaining 运算符允许开发人员直接用简单的方式处理这种情况,而不用进行重复性操作,或者使用临时变量分配中间结果:

var street = user.address?.street
var fooValue = myForm.querySelector('input[name=foo]')?.value

因为是保护访问属性链时的 null 与 undefined,所以 Optional Chaining 运算符也叫做“安全导航运算符”,TC39 标准中给出的该运算符是“?.”,它的语法可以适用于三种场景:

obj?.prop       // 自判断静态属性访问
obj?.[expr]     // 自判断动态访问
func?.(...args) // 自判断函数或方法调用

null 判断合并(Nullish Coalescing)

另一个与 Optional Chaining 很接近的特性是 null 判断合并(Nullish Coalescing),由特定的 Nullish Coalescing 操作符 ?? 启用,它也是即将到来的 ECMAScript 特性。

考虑以下代码:

let x = (foo !== null && foo !== undefined) ?foo :bar();

如果 foo 不为空并且不等于 undefined,则执行 bar()。它现在可以等效于:

let x = foo ?? bar();

断言

如果发生意外情况,则有一组特定函数会抛出错误,这被称为断言。例如 Node.js 有一个专用的 assert 函数:

assert(someValue === 42);

如果 someValue 不等于 42,则 assert 将抛出 AssertionError。

JavaScript 中的断言通常用于防止传入不正确的类型,例如:

function multiply(x, y) {assert(typeof x === "number");assert(typeof y === "number");return x * y;
}

不过在 TypeScript 中,会有一些类型问题:

function yell(str) {assert(typeof str === "string");return str.toUppercase();// Oops! We misspelled 'toUpperCase'.// Would be great if TypeScript still caught this!
}

替代方法是改写代码,以便语言可以对其进行分析,但这不太方便:

function yell(str) {if (typeof str !== "string") {throw new TypeError("str should have been a string.")}// Error caught!return str.toUppercase();
}

TypeScript 希望以最小的破坏性方式保留现有 JavaScript 结构,因此 TypeScript 3.7 引入了一个称为“断言签名”的新概念,可以对这些断言函数进行建模。

第一种断言签名对 Node.js assert 的执行方式进行建模,它确保在包含范围的其余部分中,无论检查什么条件都必须为真。

function assert(condition: any, msg?: string): asserts condition {if (!condition) {throw new AssertionError(msg)}
}

assert condition 表示,如果 assert 返回,则传递给 condition 参数的任何内容都必须为 true(否则会引发错误),这意味着对于其余范围,该条件必须是 true。

以前边的 yell 为例,确实可以捕获到类型错误:

function yell(str) {assert(typeof str === "string");return str.toUppercase();//         ~~~~~~~~~~~// error: Property 'toUppercase' does not exist on type 'string'.//        Did you mean 'toUpperCase'?
}function assert(condition: any, msg?: string): asserts condition {if (!condition) {throw new AssertionError(msg)}
}

另一种断言签名不检查条件,而是告诉 TypeScript 特定的变量或属性具有不同的类型。

function assertIsString(val: any): asserts val is string {if (typeof val !== "string") {throw new AssertionError("Not a string!");}
}

这里的 assert val is string,确保在对 assertIsString 进行任何调用之后,传入的任何变量都将是字符串。

function yell(str: any) {assertIsString(str);// Now TypeScript knows that 'str' is a 'string'.return str.toUppercase();//         ~~~~~~~~~~~// error: Property 'toUppercase' does not exist on type 'string'.//        Did you mean 'toUpperCase'?
}

这些断言签名与编写类型谓词签名非常相似:

function isString(val: any): val is string {return typeof val === "string";
}function yell(str: any) {if (isString(str)) {return str.toUppercase();}throw "Oops!";
}

类似类型谓词签名,这些断言签名也具有很强的表现力,可以用这些表达一些相当复杂的逻辑:

function assertIsDefined<T>(val: T): asserts val is NonNullable<T> {if (val === undefined || val === null) {throw new AssertionError(`Expected 'val' to be defined, but received ${val}`);}
}

此外还有其它新特性与特性增强,详情查看更新说明:

https://devblogs.microsoft.com/typescript/announcing-typescript-3-7

另外,作为更新的一部分,TypeScript 官网还有一个游乐场(Playground)可以体验所有新特性:

https://www.typescriptlang.org/play/index.html?#show-whatisnew

TypeScript 3.7 发布,带来 Optional Chaining 等特性相关推荐

  1. TypeScript 3.7 RC 发布,备受瞩目的 Optional Chaining 来了

    点击上方"IT平头哥联盟",选择"置顶或者星标" 你的关注意义重大! October 24th, 2019 We're pleased to announce ...

  2. Optional Chaining 进入 ES2020,不用满屏`x x.yyy`了

    微软 TypeScript 程序经理 Daniel Rosenwasser 宣布 Optional Chaning(?. )进入 TC39 Stage 4 状态,这意味着该特性现在已经是 ES2020 ...

  3. 马云再谈对钱没有兴趣;比尔·盖茨:微软原本可以击败 Android!TypeScript 3.7 发布 | 极客头条...

    作者 | 唐小引 出品 | CSDN(ID:CSDNnews) 快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客 ...

  4. ​搜狐大量员工遭遇“工资补助”诈骗;​腾讯客服回应“借钱就能避免微信号被封”;TypeScript 4.7发布|极客头条

    「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 梦依丹 出品 | CSDN(ID:CSDNnews ...

  5. TypeScript 2.1发布

    TypeScript是微软开发的一个JavaScript的超集,提供了最新的JavaScript特性以及可选的静态类型.近日,TypeScript 2.1发布.该版本提供了功能更为强大的类型检查器,并 ...

  6. TypeScript 3.5 发布,速度提升、工具智能

    TypeScript 3.5 发布了,此版本在编译器.语言和编辑器工具上带来了一些新特性. 速度提升 TypeScript 3.5 引入了几种对于 type 检查和增量构建的优化,使得速度大幅提升. ...

  7. 华为称不会退出海外市场;英伟达证实遭遇黑客攻击;TypeScript 4.6发布 | 极客头条...

    「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 整理 | 苏宓 出品 | CSDN(ID:CSDNnews) ...

  8. 华为宣布方舟编译器将开源;​苹果秋季发布会定档9月10日;TypeScript 3.6 发布 | 极客头条...

    快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「CSDN 极客头条」,是从 CSDN 网站延伸至官方微信公众号的特别栏目,专注于一天业界事报道.风里雨里,我们将每天为朋友们,播报最新鲜有 ...

  9. TypeScript 3.4 发布

    TypeScript 3.4 发布了,此版本主要更新内容如下: Faster subsequent builds with the --incremental flag:使用 --incrementa ...

最新文章

  1. 关于java中Math的一些用法
  2. Vue.js 渲染函数 JSX
  3. boost::log模块实现从设置文件初始化库的示例
  4. 条件随机场 python_用条件随机场做网络小说命名实体识别
  5. 利用OpenCV实现——目标跟踪方法(一)
  6. 【论文笔记】EMNLP2019: 基于层次多图卷积网络的实体类型分类
  7. 金立S6:因“耀”开启金属手机2.0时代
  8. Java基础---Java---IO流-----File 类、递归、删除一个带内容的目录、列出指定目录下文件夹、FilenameFilte
  9. 每日一句20191027
  10. 【PDN仿真笔记3-电容布局Q3D模型搭建】
  11. [王垠系列]什么是语义学
  12. OpenLayers 加载 百度 地图
  13. RadioGroup+Fragment+PulltorefreshScrollView+GridView+侧拉菜单+TabLayout+ViewPager
  14. Autovue与后台的管理系统集成示例
  15. 使用微信PC端的截图dll库实现微信截图功能(C++ Builder实现)
  16. 国密SM4,layui前端 和.net core后台 加密解密 .net加密解密
  17. cad调了比例因子没反应_「室内设计」大神们都在用的9个CAD制图技巧,你会用几个?...
  18. 疯狂的 ICO 终于被全面叫停;9 月全球数据库排名,Oracle 跌势明显
  19. linux 查看ko符号表,linux modprobe命令参数及用法详解--linux加载模块命令
  20. 分析如何编写一个timer程序(以blt_soft_timer为例)

热门文章

  1. 选择要加载的插件有什么用_为什么/如何PPT形状圆角化,用好这个插件,画出更多神奇形状...
  2. 帮设计师打开思路的网站主页设计案例,给你出灵感
  3. 404!优秀案例分享,这样的页面照样能给你小惊喜
  4. lock是悲观锁还是乐观锁_图文并茂的带你彻底理解悲观锁与乐观锁
  5. qt designer 自定义插件找不到指定的模块_go与qt的新酒老瓶
  6. C++ 虚析构函数作用
  7. qwt需要添加到qcreator的东西
  8. MATLAB Tick的方向(刻度标外翻)
  9. How To Deploy OpenShift Container Platform 4.8 on KVM
  10. 13 个开源备份解决方案