文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

前言

距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代表方法。

其他

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

以上就是浅谈TypeScript3.7中值得注意的3个新特性的详细内容,更多关于TypeScript3.7新特性的资料请关注编程网其它相关文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯