typescript新品尝鲜(代码片段)

libinfs libinfs     2022-12-10     759

关键词:

还记得我在《2020 年 JavaScript 状态调研报告小结》中提到的 2020 年全球开发者最喜欢的 JavaScript 写法是什么吗?-- 没错!TypeScript!。鉴于在项目中使用 TypeScript 确实有以下种种好处:

  1. 帮助开发者在「代码撰写时」(结合编辑器)而非「代码运行时」及时感知类型/语法错误(⚠️ 注意,TypeScript 并非万能,它并不能帮助您捕捉请求错误或环境错误);
  2. 结合编辑器,提供智能提示,提升开发体验;
  3. 很少被提及的一点:更容易让服务端程序员理解代码,方便前后端交流;

本篇文章将向您介绍 TypeScript 自 3.7 版本以来更新的一些实用特性,希望您的代码能变得更加稳固,优雅。

1. 新支持特性

请注意,TypeScript 是 JavaScript 类型的超集,而非语法的超集,因此一些符合 JavaScript 语法规范的代码,在 TypeScript 中却可能报错,例如:

let x = 1
x = \'hello world\'

因此,在现代工具链中,TypeScript 编译器甚至不被用作编译出指定版本 JavaScript 的工具(这通常是 babel 的工作),而是作为一种更强大的代码检查工具被使用。但是随着 TypeScript 版本的更新,一些新的 JavaScript 语法特性也逐渐被 TypeScript 支持,这使得开发者在一些场景下可以摆脱 babel 编译的过程,直接使用 TypeScript 编译生成最终的代码。

1.1 Optional Chaining & Nullish Coalescing

自 3.7 版本开始,TypeScript 支持了目前在 stage 4 阶段的 Optional Chaining ,Nullish Coalescing语法。

1.2 Private Fields && Namespace exports

自 3.8 版本开始,Typescript 支持了目前在 stage 3 阶段的 Private Fields 语法。(通过底层使用 WeakMap 数据结构,该语法使得 JavaScript 类真正意义上拥有「私有属性」)

class Foo 
  #bar

同时,该版本还支持了 namespace exports 语法:

export * as utils from \'./utils\'

1.3 Inference of class field types

自 4.0 版本开始,TypeScript 支持自动推导 class 中的属性类型,无需再显示声明。


2. 新类型:元组

TypeScript 4.0 开始支持两种新的元组类型声明方式:

  1. Variadic tuple types(可变元组类型)
  2. Labeled tuple types(命名元组类型)

2.1 可变元组类型

type Foo<T extends any[]> = [boolean, ...T, boolean]

通过这种声明方式,我们可以更精确的定义一个函数参数类型,在使用函数式编程时,这种定义方式就很有用。

2.2 命名元组类型

const Address = [string, number]

function setAddress(...args: Address) 
  // some code here

当我们这样定义函数入参后,在使用函数时,编辑器的智能提示只会提示我们参数类型,丢失了对参数含义的描述。为了改善这一点,我们可以通过 Labeled tuple types,我们可以这样定义参数:

const Address = [streetName: string, streetNumber: number]

function setAddress(...args: Address) 
  // some code here

这样,在调用函数时,我们的参数就获得了相应的语义,这使得代码更加容易维护。


3. 可递归调用类型

自 Typescript 3.7 开始,我们终于获得了只用一条类型声明声明 JSON 数据的能力:

type JSONValue = 
  | string
  | number
  | boolean
  | null
  | JSONValue[]
  | 
      [key: string]: JSONValue
    

4. 错误和断言处理

4.1 // @ts-expect-error

TypeScript 3.9 给出了一个替代 // @ts-ignore 注释的方案:// @ts-expect-error

从字面上我们不难理解为什么后者是更优的选择:

  1. 显示声明了会报错的原因,而不只是一味的规避检查;
  2. 向前兼容,未来如果 TypeScript 支持某语法导致不再报错,TypeScript 会主动提示删除注释,这会让代码变得更加简洁;

4.2 unknown 类型

让我们想想这段代码会最终打印出什么:

try 
  willThrowAnError()
 catch (err) 
  console.log(typeof err.message)

答案是 "string" 吗,并非如此!因为 err.message 的值有可能是 undefined,甚至有可能在这里抛错,这取决于我们的函数 willThrowAnError 内部是如何定义的:

// err.message => undefined
function willThrowAnError() 
    throw \'hello world\'


// err.message => throw an Error!
function willThrowAnError() 
  throw null

虽然第二种情况几乎不会发生,但这两个示例说明了 catch 参数类型的不确定性(因此在 TypeScript 中,它的默认类型是 any)。

因此,在 TypeScript 4.0 中,提供了 unknown 类型供我们处理这些我们「不知道」的类型。不同于 any 类型,unknown 是 TypeScript 中的第一类型,可以在任何地方使用。

子曰:知之为知之,不知为不知。

4.3 Assertion functions

自 TypeScript 3.7 开始,支持基于 return/throw 的类型断言。

function assertIsArray(val: any): asserts val is any[] 
  if (!Array.isArray(val)) throw new Error(`$val is not an array`)

这将让测试变得更加容易。

点击此处浏览相关文档


5. 模块

5.1 Type-only imports

自 TypeScript 3.8 开始,TypeScript 支持仅引入模块类型:

import type  SomeThing  from "./some-module.js";

export type  SomeThing ;

这样做的好处在于,当某个模块中包含副作用代码时,用户如果直接引入模块,就会无意间执行副作用代码,但当通过声明只引入类型时,则避免了这个隐患。

点击此处浏览相关文档。

6. 小结

至此,本篇文章带您快速浏览了 TypeScript 3.7 以来一些实用性强的新特性,不知道您是否学有所获?TypeScript 将在 2021 年 5 月 25 日发布 4.3 版本,届时会新增哪些有意思的新特性?且听下回分解:)

新品尝鲜ocr磅单识别上线邀测,为货运物流提速增效

尊敬的百度大脑AI开放平台用户,感谢您长期以来对百度OCR产品的支持与关注。近日,磅单识别全新上线,结构化识别各类常见版式磅单的8个关键字段,为货运物流提速增效。申请试用即可享有200次/天免费测试资... 查看详情

新品尝鲜ocr磅单识别上线邀测,为货运物流提速增效

尊敬的百度大脑AI开放平台用户,感谢您长期以来对百度OCR产品的支持与关注。近日,磅单识别全新上线,结构化识别各类常见版式磅单的8个关键字段,为货运物流提速增效。申请试用即可享有200次/天免费测试资... 查看详情

textmaingradle新品(代码片段)

查看详情

rxjava3的调用方法尝鲜(代码片段)

 1、非常普通的观察者和被观察者调用方式:publicstaticvoidmain(String[]args)//被观察者ObservablemyObservable=Observable.create(newObservableOnSubscribe<String>()@Overridepublicvoidsubscribe(@NonNullOb 查看详情

istio1.1尝鲜记(代码片段)

...爱好者能够亲自体验Istio1.1,公司的技术大佬赶出了这篇尝鲜教程,其中包括环境、安装、可能遇到的问题及解决方式等,希望对大家有所帮助。环境已经安装了Kubernetes集群,有1个master和4个node。操作系统都是CentOSLinux7。 下... 查看详情

uwp2018新版navigationview尝鲜(代码片段)

本文参考了官方文档以及提供的示例代码(官方代码貌似有点误导,所以写了这一篇,并且文末有GayHub代码地址)官方文档发布于20180806,说明NavigationView刚发布了没几天,还在开发中,所以里面的接口啥的随时会变! 随时会... 查看详情

dpdkexample之link_status_interrupt尝鲜(代码片段)

dpdkexample之link_status_interrupt尝鲜dpdk的example例子很多,可以帮助用户快速了解dpdk的部分原理。在编译example时,经常找不到如何编译。遇到各种报错的问题。其实,dpdk官网已经有了很好的例子示范了。就各种类型的编译都有帮助... 查看详情

mapbox尝鲜值之云图动画(代码片段)

...f0c;终于有个球了,于是就迫不及待的今天想尝个鲜。尝鲜效果主要实现了:1.源码的编译,最新的版本为2.10.0-dev;2、三维球展示;3、由于最近台风活动比较频繁,所以加入了云图动 查看详情

mapbox尝鲜值之云图动画(代码片段)

...f0c;终于有个球了,于是就迫不及待的今天想尝个鲜。尝鲜效果主要实现了:1.源码的编译,最新的版本为2.10.0-dev;2、三维球展示;3、由于最近台风活动比较频繁,所以加入了云图动 查看详情

尝鲜.netcore2.1——编写一个globaltool(代码片段)

本文内容参考微软工程师NateMcMaster的博文.NETCore2.1GlobalTools用过npm开发都知道,npm包都可以以全局的方式安装,例如安装一个http-server服务,可以使用npmihttp-server-g来将http-server包安装到全局环境。安装完之后,就可以通过cmd或者po... 查看详情

离人工智能进入我们的社会还有多远?(ces2022新品尝鲜)

1.前言在下个月三号要开幕的CES2022上,一个令我感兴趣的产品被预告了出来。EngineeredArts仿真机器人来自EngineeredArts的Ameca类人型机器人的表现让我眼前一亮。丰富的表情,类人的动作,我甚至觉得他应该拥有一层皮肤... 查看详情

离人工智能进入我们的社会还有多远?(ces2022新品尝鲜)

1.前言在下个月三号要开幕的CES2022上,一个令我感兴趣的产品被预告了出来。EngineeredArts仿真机器人来自EngineeredArts的Ameca类人型机器人的表现让我眼前一亮。丰富的表情,类人的动作,我甚至觉得他应该拥有一层皮肤... 查看详情

拿来吧你,compose尝鲜初体验!(代码片段)

前言Compose正式版在七月份的尾巴如期而至,我也写了一份Compose版本的项目,Demo其实比较简单。地址:github.com/mCyp/Hoo。这已经是它的第三个版本:第一版:Kotlin+Jetpack第二版:Flutter第三版:Compose+... 查看详情

reactsuspense尝鲜,处理前后端io异步操作(代码片段)

简单介绍一下SuspenseSuspense主要用来解决网络IO问题,它早在2018年的React16.6.0版本中就已发布。它的相关用法有些已经比较成熟,有的相对不太稳定,甚至经历了重命名、删除:在render函数中,我们可以写入一个异步请求,请求数... 查看详情

rxjava3的调用方法尝鲜(代码片段)

 1、非常普通的观察者和被观察者调用方式:publicstaticvoidmain(String[]args)//被观察者ObservablemyObservable=Observable.create(newObservableOnSubscribe<String>()@Overridepublicvoidsubscribe(@NonNullObservableEmitter<String>emitter)throwsThrowableemi... 查看详情

springboot3.x原生镜像-nativeimage尝鲜(代码片段)

前提Spring团队致力于为Spring应用程序提供原生映像支持已经有一段时间了。在SpringBoo2.x的SpringNative实验项目中酝酿了3年多之后,随着SpringFramework6和SpringBoot3的发布,对应的项目就是SpringNative,原生镜像支持将会发布GA... 查看详情

利用conda尝鲜python3.10(代码片段)

1简介就在几天前,Python3.10的第一个正式版本3.10.0发布,之前我们只是从其各个测试版本中捕风捉影地知晓了一些可能加入的新特性,而在正式版本中,我们得以一睹其正式加入的诸多新特性。本文我就将带大家... 查看详情

reactsuspense尝鲜,处理前后端io异步操作(代码片段)

简单介绍一下SuspenseSuspense主要用来解决网络IO问题,它早在2018年的React16.6.0版本中就已发布。它的相关用法有些已经比较成熟,有的相对不太稳定,甚至经历了重命名、删除:在render函数中,我们可以写入一... 查看详情