您的位置：首页 > 编程技术 > js  >  浅谈TypeScript3.7中值得注意的3个新特性

浅谈TypeScript3.7中值得注意的3个新特性

 更新时间：2021年5月7日 15:52  点击：1703

前言

距typescript 3.7正式发布已经有一段时间了，这段时间正在对手上的项目进行typescript的迁移工作，所以会特别留意每一次的release。

对于3.7中包含的新特性，其实相比较之前几次release来说，算是一个比较小的发布版本，但是其中包含的几个特性对代码质量本身，会带来显著地提升。

Optional Chaining

首先第一个特性是对于optional chaining操作符的支持，翻译过来应该可以叫做可选链操作符，当然我还是觉得这样翻译有点怪怪的，暂且就直接用英文好了。

这个特性首先是es2019中包含的一个新特性，对于特性本身，有兴趣的可以参考这里。

由于typescript是JavaScript的超集，所以预先实现这个特性也是在预料之内的事情，大概使用方式是这样的：

a?.b();

等价于：

if(a) a.b();
// 或者
a && a.b()

如果是多层嵌套，比如b也是一个对象，要继续调用c()，那么可以这样：

a?.b?.c()

但其实就算这样写的话，它也不是安全的，因为b()中的b也有可能是空值，直接调用的话，也会抛出异常。为了绝对的安全，可以这样写：

a?.b?.();

值得注意的是，这里一定要对于可选的含义有一个正确的理解，可选的意思是，它在类型的声明中，通过?来修饰，代表一个类型包含某个可为空值的属性。言外之意的意思就是，?.不会对那些不符合类型声明本身的属性调用，比如：

interface A {}

const a: A = {};

a?.b?.(); // Property 'b' does not exist on type 'A'

除非A接口的声明改为：

interface A {
  b?: any
}

这个特性在项目的实践意义是很大的，我们可以写更少的if断言语句或者&&操作符，但是却达到了相同的效果。

Nullish Coalescing

中文翻译过来会叫做双问号操作符，这个其实挺形象的，因为它的语法确实就是??。

这个操作符的功能，往简单说，就是为一个空值，指定一个默认值，类似下面的代码：

let a = b || 'foo'

当b为空值时，由于||操作符的特性，a的值会被赋予foo。如果使用??操作符进行改写，如下：

let a = b ?? 'foo'

表面上看，似乎两者没什么区别，但其实这里隐含了一个问题，就是||对于空值的概念，并不仅仅指null和undefined，类似false、0等一系列逻辑上为false的值都会算作空值，这显然是有问题的，比如：

const b = 0
let a = b || 'foo'
// a 为 'foo'

这个示例中，我们期望a只有在b为真正意义上的空值（null或者undefined）时，才被赋予默认值，a应当等于0，而实际运行结果确实foo，因为b=0，在||操作符的运行过程中，它会被解释为false。我曾在实际项目中，编写过一个验证码组件，很不幸，踩上了这个坑，当时为了debug这个问题，花了很长时间。

但使用??操作符，就不会存在这个问题。

Uncalled Function Checks

我相信很多人都曾经遇过类似的问题，因为缺乏有效的命名规范，断言属性和断言方法会在实际项目中被混用，比如：

class A {
    isFoo(): boolean {
        return false;
    }
}

function test(a: A) {
    if (a.isFoo) { 
        ...
    } 
}

这里如果我们的本意是要通过调用a.isFoo来获取一个断言值，我们明显犯了一个错误，我们应当使用if (a.isFoo())，而不是直接if (a.isFoo)，因为后者虽然在语法层面没有错误，但是在逻辑含义，它将被断言为true。但在3.7发布之后，typescript会尝试帮助我们发现这个问题。

虽然如此，但我仍然建议大家针对断言方法和断言属性制定统一的命名规范，比如isXXX代表属性，而assertXXX代表方法。

其他

其他的一些变更，均是易用性上的一些改变，比如：

  • Flatter Error Reporting：会将一大段的类型重复的错误日志，尽可能地压缩为单条、更准确、更精简的错误日志
  • 文件级别的@ts-nocheck：之前版本中该注解仅支持行内级别
  • 递归类型声明：能够在类型声明中，使用递归语法来声明更复杂的类型，比如json类型
  • 对js文件提供declaration支持，以减小从js项目迁移的迁移成本

以上就是浅谈TypeScript3.7中值得注意的3个新特性的详细内容，更多关于TypeScript3.7新特性的资料请关注猪先飞其它相关文章！

[!--infotagslink--]

相关文章

  • php 中file_get_contents超时问题的解决方法

    file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢，导致php脚本超时了，但也有其它很多原因，下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25

  • php file_get_contents 设置代理抓取页面示例

    file_get_contents函数在php中可以直接打开本地文件也可以直接抓取远程服务器文件，如果简单的采集我们可以使用file_get_contents直接来操作，如果有防采集我们可能需要...2016-11-25

  • 解决echarts 一条柱状图显示两个值,类似进度条的问题

    这篇文章主要介绍了解决echarts 一条柱状图显示两个值,类似进度条的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20

  • C# 10个常用特性汇总

    这篇文章主要介绍了C# 10个常用特性，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-09

  • php报错file_get_contents(): php_network_getaddresses问题

    本文章来为各位介绍一篇关于file_get_contents(): php_network_getaddresses: getaddrinfo failed: Name or service not known...错误解决办法。 昨天，服务器的DN...2016-11-25

  • PHP file_get_contents设置超时处理方法

    file_get_contents的超时处理话说，从PHP5开始，file_get_content已经支持context了（手册上写着：5.0.0 Added the context support. ），也就是说，从5.0开始，file_get_contents其实也可以POST数据。今天说的这篇是讲超时的，确实在...2013-10-04

  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-07-11

  • 基于Ionic3实现选项卡切换并重新加载echarts

    这篇文章主要介绍了基于Ionic3实现选项卡切换并重新加载echarts,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-24

  • file_get_contents()获取https出现这个错误Unable to find the wrapper “https”

    下面我们来看一篇关于file_get_contents()获取https出现这个错误Unable to find the wrapper “https”问题的解决办法. file_get_contents()获取https出现这个错...2016-11-25

  • Spring Data JPA 关键字Exists的用法说明

    这篇文章主要介绍了Spring Data JPA 关键字Exists的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-06-10

  • Javascript Echarts空气质量地图效果详解

    这篇文章主要介绍了详解Javascript利用echarts画空气质量地图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-10-11

  • JavaScript中的Reflect对象详解(ES6新特性)

    这篇文章主要介绍了JavaScript中的Reflect对象(ES6新特性)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下...2016-07-29

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中，有时会遇到客户需要在一个图表中将柱状图、饼状图、曲线图的都体现出来，即可以从柱状图中看出具体数据、又能从曲线图中看出变化趋势，还能从饼状图中看出各部分数据比重。Highcharts可以轻松实现...2015-03-15

  • Echarts实例教程之树形图表的实现方法

    众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下...2021-08-06

  • echarts实现获取datazoom的起始值(包括x轴和y轴)

    这篇文章主要介绍了echarts实现获取datazoom的起始值(包括x轴和y轴)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-20

  • 在echarts中图例legend和坐标系grid实现左右布局实例

    这篇文章主要介绍了在echarts中图例legend和坐标系grid实现左右布局实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-05-17

  • file_put_contents并发性问题解决方案整理

    在使用file_put_contents时会碰到并发性问题了，对于这个问题我们有多种解决方案了，其实锁是小编比较喜欢的解决办法了，当然也有其它办法，具体如下。 解决　办法一,fil...2016-11-25

  • CocosCreator入门教程之用TS制作第一个游戏

    这篇文章主要介绍了CocosCreator入门教程之用TS制作第一个游戏，对TypeScript感兴趣的同学，一定要看一下...2021-04-16

  • php提示Warning: file_get_contents(): couldn’t resolve

    在使用file_get_contents函数获取远程文件时提示Warning: file_get_contents(): couldn’t resolve错误了，这个我们可以看出是dns的问题，解决办法也简单。 今天在...2016-11-25

  • C#语言主要特性总结

    这篇文章主要介绍了C#语言主要特性总结,本文总结了C#语言的简单、现代、面向对象、类型安全、相互兼容性、可伸缩性和可升级性等几个主要特点,需要的朋友可以参考下...2020-06-25