关闭

typescript 3.7中值得注意的3个新特性

时间: 2019-11-08阅读: 817标签: 特性

写在前面

距 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 项目迁移的迁移成本


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6482

关闭

使用 React 要懂的 Js特性

与我使用的其他框架相比,我最喜欢 React 的原因之一就是它对 JavaScript 的暴露程度。没有模板DSL( JSX 编译为合理的 JavaScript),组件 API 只是通过添加 React Hooks 变得更简单,并且该框架为解决的核心 UI 问题提供非常少的抽象概念

Js的用途和特性

JavaScript 最初的目的是为了“赋予网页生命”。这种编程语言我们称之为脚本。它们可以写在 HTML 中,在页面加载的时候会自动执行。脚本作为纯文本存在和执行。它们不需要特殊的准备或编译即可运行。

ES6新特性--var、let、const

var不存在块级作用域,具有变量提升机制。 let和const存在块级作用域,不存在变量提升。在同一作用域内只能声明一次。const在声明时需要赋值且无法修改,但如果常量是对象,则对象的属性可以修改。

h5和css3的新特性有哪些?

HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准。CSS3是CSS(层叠样式表)技术的升级版本。下面我们来看一下HTML5余css3的新特性有哪些。

CSS 的特性值

在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 -- 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却按照自己的方式做了某些纠正,也就是浏览器容错

ES2019 新特性汇总

最近 ECMAScript2019,最新提案完成:tc39 Finished Proposals,我这里也是按照官方介绍的顺序进行整理,如有疑问,可以查看官方介绍啦~另外之前也整理了 《ES6/ES7/ES8/ES9系列》,可以一起看哈。

你可能错过的现代 JavaScript 特性

尽管我在过去 7 年中几乎每天都在写 JavaScript 代码,但不得不承认,我实际上并不是很注意 ES 语言的发布声明。 async/await 和 Proxies 之类的主要特性是一回事,但是每年都有稳定的小规模、渐进式的改进在不断涌现

Html5、Css3、ES6的新特性

Html5的新特性语义化标签:有利于SEO,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重。表单新特性,多媒体视频(video)和音频(audio)

CSS 特性和值

CSS 声明可以为空,或者由 CSS 特性( property ),后加一个冒号 :,跟着是一个特性的值构成。中间可以有空格将它们隔开。

ES6 Math方法和Number新特性简介

Math.sign() 函数返回一个数字的符号, 指示数字是正数,负数还是零。此函数共有5种返回值, 分别是 1, -1, 0, -0, NaN. 代表的分别是正数, 负数, 正零, 负零, NaN。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!