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

前言

距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新特性的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • TypeScript 运行时类型检查补充工具

    TypeScript是静态类型系统,在编译时做类型检查.一般而言,如果项目所用到的所有库.模块都是基于ts的,那么静态类型已经可以避免大部分编程层面的类型问题.不过,在一些场景下来,单纯静态类型是无法解决问题的,部分数据是动态传入到系统中的,主要包含场景如下: 第三方数据源(接口API.本地持久化存储.postMessage等) 第三方调用者传参 全局状态变更 当然,还有其他可能,总之,单纯靠静态类型检查,无法解决运行时类型问题.因此,我写了tyshemo这个工具.它可以帮助我们完成运行时的类型

  • 你不知道的 TypeScript 高级类型(小结)

    前言 对于有 JavaScript 基础的同学来说,入门 TypeScript 其实很容易,只需要简单掌握其基础的类型系统就可以逐步将 JS 应用过渡到 TS 应用. // js const double = (num) => 2 * num // ts const double = (num: number): number => 2 * num 然而,当应用越来越复杂,我们很容易把一些变量设置为 any 类型,TypeScript 写着写着也就成了 AnyScript.为了让大家能更加深入

  • TypeScript 安装使用及基本数据类型

    TypeScript 安装使用及基本数据类型

    第一步 全局安装TypeScript 使用 npm 安装 npm install -g typescript 使用cnpm 安装 cnpm install -g typescript 使用yarn安装 yarn global add typescript 第二步 初始化TypeScript 在vscode里面 终端 >> 运行生成任务 >> tsc:监视tsconfig.json 接下来就可以开始我们的typescript旅程了~ TypeScript 的 基本数据类型 // 布尔

  • 浅析TypeScript 命名空间

    TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准. TypeScript 由微软开发的自由和开源的编程语言. TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上. 命名空间一个最明确的目的就是解决重名问题. 假设这样一种情况,当一个班上有两个名叫小明的学生时,为了明确区分它们,我们在使用名字之外,不得不使用一些额外的信息,比如他们的姓(王小明,李小明),或者他

  • TypeScript之调用栈的实现

    本文介绍了TypeScript之调用栈,分享给大家,具体如下: class CallStackTool{ private static index:number = 0; public static printCallStack (count:number , simple: boolean = true):void { let caller:Function = arguments.callee.caller; let i:number = 0; count = count || 10; Ca

  • typescript配置alias的详细步骤

    1 安装依赖 npm install --save-dev babel-plugin-module-resolver # yarn add babel-plugin-module-resolver --dev 根目录新增.babelrc文件 参考以下内容按您项目中的需要去修改 { "presets": ["next/babel"], "plugins": [ [ "module-resolver", { "alias

  • 详解Typescript里的This的使用方法

    this可以说是Javascript里最难理解的特性之一了,Typescript里的 this 似乎更加复杂了,Typescript里的 this 有三中场景,不同的场景都有不同意思. this 参数: 限制调用函数时的 this 类型 this 类型: 用于支持链式调用,尤其支持 class 继承的链式调用 ThisType: 用于构造复杂的 factory 函数 this 参数 由于 javascript 支持灵活的函数调用方式,不同的调用场景,this 的指向也有所不同 作为对象的方法调用

  • TypeScript魔法堂之枚举的超实用手册

    前言 也许前端的同学会问JavaScript从诞生至今都没有枚举类型,我们不是都活得挺好的吗?为什么TypeScript需要引入枚举类型呢? 也许被迫写前端的后端同学会问,TypeScript的枚举类型是和Java/.NET的一样吗? 下面我们来一起探讨和尝试解答吧! 前端一直都需要枚举 我敢保证,前端的同学都会万分肯定地告诉大家:我们从来没有写过枚举.那是因为虽然ECMAScript将enum作为保留字,但至ES2020为止还没有提出枚举的实现规范.语言没有提供规范和语言实现,不代表思想活跃勇

  • Typescript3.9 常用新特性一览(推荐)

    更新什么?概况一览 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 在代码操作的时候正确的保留

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

    前言 距typescript 3.7正式发布已经有一段时间了,这段时间正在对手上的项目进行typescript的迁移工作,所以会特别留意每一次的release. 对于3.7中包含的新特性,其实相比较之前几次release来说,算是一个比较小的发布版本,但是其中包含的几个特性对代码质量本身,会带来显著地提升. Optional Chaining 首先第一个特性是对于optional chaining操作符的支持,翻译过来应该可以叫做可选链操作符,当然我还是觉得这样翻译有点怪怪的,暂且就直接用英文好

  • 浅谈一下Spring中的createBean

    浅谈一下Spring中的createBean

    目录 找到BeanClass并且加载类 实例化前 实例化 Supplier创建对象 工厂方法创建对象 推断构造方法 BeanDefionition 的后置处理 实例化后 属性填充 Aware回调 初始化前 初始化 初始化后 总结BeanPostProcessor 找到BeanClass并且加载类 protected Object createBean(String beanName, RootBeanDefinition mbd, @Nullable Object[] args) throws

  • 浅谈XML Schema中的elementFormDefault属性

    elementFormDefault属性与命名空间相关,其值可设置为qualified或unqualified 如果设置为qualified: 在XML文档中使用局部元素时,必须使用限定短名作为前缀 sean.xsd: <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:sean=&

  • 浅谈iOS开发中static变量的三大作用

    (1)先来介绍它的第一条也是最重要的一条:隐藏 当我们同时编译多个文件时,所有未加static前缀的全局变量和函数都具有全局可见性.为理解这句话,我举例来说明.我们要同时编译两个源文件,一个是a.c,另一个是main.c. 下面是a.c的内容 char a = 'A'; // global variable void msg() { printf("Hello\n"); } 下面是main.c的内容 int main(void) { extern char a; // extern v

  • 浅谈Go语言中的结构体struct & 接口Interface & 反射

    结构体struct struct 用来自定义复杂数据结构,可以包含多个字段(属性),可以嵌套: go中的struct类型理解为类,可以定义方法,和函数定义有些许区别: struct类型是值类型. struct定义 type User struct { Name string Age int32 mess string } var user User var user1 *User = &User{} var user2 *User = new(User) struct使用 下面示例中user1和

  • 浅谈pyhton学习中出现的各种问题(新手必看)

    目前比较杂乱无章,后续还会有一些添加补充 1.标识符 (1)标识符是区分大小写的. (2)标示符以字母或下划线开头,可包括字母,下划线和数字. (3)以下划线开头的标识符是有特殊意义的. 2.参数前加星号(*)的意义 面对实际情况时无法提前得知要传入的参数的个数,因此在参数前加星号从而允许函数接受任意多的参数,情况如下: (1)参数前加一个星号(*),传入的参数存储为元组的形式: (2)参数前加两个星号(*),传入的参数存储为字典的形式,并且调用时采用例如'a=1,b=2,c=3'的形式. 3.

  • 浅谈c语言中一种典型的排列组合算法

    浅谈c语言中一种典型的排列组合算法

    c语言中的全排列算法和组合数算法在实际问题中应用非常之广,但算法有许许多多,而我个人认为方法不必记太多,最好只记熟一种即可,一招鲜亦可吃遍天 全排列: #include<stdio.h> void swap(int *p1,int *p2) { int t=*p1; *p1=*p2; *p2=t; } void permutation(int a[],int index,int size) { if(index==size) { for(int i=0;i<size;i++) print

  • 浅谈spring容器中bean的初始化

    当我们在spring容器中添加一个bean时,如果没有指明它的scope属性,则默认是singleton,也就是单例的. 例如先声明一个bean: public class People { private String name; private String sex; public String getName() { return name; } public void setName(String name) { this.name = name; } public String get

  • 浅谈java Collection中的排序问题

    这里讨论list.set.map的排序,包括按照map的value进行排序. 1)list排序 list排序可以直接采用Collections的sort方法,也可以使用Arrays的sort方法,归根结底Collections就是调用Arrays的sort方法. public static <T> void sort(List<T> list, Comparator<? super T> c) { Object[] a = list.toArray(); Arrays.

  • java web学习_浅谈request对象中get和post的差异

    java web学习_浅谈request对象中get和post的差异

    阅读目录(Content) •1.get与post的区别 •1.1 get方法 jsp中的代码form表单代码 •1.2 action包中servlet的doGet方法中的代码 •2.运行结果 •2.1 输入数据 •2.2 打印出数据 •3.post方法 •4.对比 •4.1 在输出页面按下F12查看 •5.分析 1.get与post的区别 Get和Post方法都是对服务器的请求方式,只是他们传输表单的方式不一样. 下面我们就以传输一个表单的数据为例,来分析get与Post的区别 1.1 get

随机推荐