7 个好用的 TypeScript 新功能

作者:RC

翻译:疯狂的技术宅

原文:https://blog.bitsrc.io/7-new-...

未经允许严禁转载

TypeScript 语言小组一直在以惊人的速度推出新功能。从最新的《 Javascript 语言状况调查》(https://2019.stateofjs.com/ja...)中可以看出,该语言的使用率越来越高。

本文将会总结你应该使用的最重要的功能。我会重点介绍以下最新版本的功能:

image.png

注意:在探究这些功能之前,你应该先去看一下 TypeScript playground,在这里可以测试所有的功能。我建议你切换到较旧的版本(单击左上角的版本下拉列表),来查看较新的版本是怎样处理以前不支持的用例的:

1*7pJ9K3PQiW6M6UqYXo_euA.gif

1. 可选链

从 v3.7 可用

这是当你尝试访问嵌套数据时的一个痛点,嵌套数据越多,代码就会变得越繁琐。

在下面的例子中,要访问 address ,你必须遍历 data.customer.address,而且 datacustomer 有可能是 undefined,所以通常使用 && 运算符或类似例子中的技巧遍历检查每个层次的定义。

现在你可以用 .? 运算符来选择性地对数据访问。通过这种方式,如果存在尚未定义的父级对象,则会在链中的任何位置返回未定义,而不是在运行时崩溃。

// v3.7 以前
if (data && data.customer && data.customer.address) {
   const {address} = data.customer
   const fullAddress = `${address.street}, ${address.city}, ${address.state }${address.zipcode}`
}

// v3.7

// data access
const address = data?.customer?.address
const fullAddress = `${address?.street}, ${address?.city}, ${address?.state } ${address?.zipcode}`

// 也适用于数组
customers?.[0]?.['address']

// 检查方法是否已定义并调用
customer.approve?.()

2. 空值合并

从 v3.7 可用

空值合并运算符是 || 的替代方法,如果左侧是 nullundefined,则它返回右侧的表达式。这和 || 有什么不同? || 本质上是 JavaScript 中的布尔 OR 运算符,我们尝试利用短路返回第一个非 false 值。这可能会产生意想不到的结果,因为当要求数字 0 或空字符串作为有效输入时,将会被视为 false。让我们用一个例子来说明:

// 以前
passPhrase = data.inputString || 'Unknown'  //不会接受 "" (空字符串)
passCode =  data.number || '-1111' // 不会接受 0 
rememberMe = data.rememberFlag || true // 将会总是 true!!!


// 现在
passPhrase = data.inputString ?? 'Unknown'  //仅在 inputString 未定义时为 Unknown
passCode =  data.number ?? '-1111' // 0 可以通过
rememberMe = data.rememberFlag ?? true // false 是有效值

通过这种方式可以明确地区分 undefinedfalse 的值。

3. 递归类型别名

从 v3.7 可用

现实世界中的很多数据类型都是递归的。例如,当你尝试处理分层数据时,会发现存在相同类型数据的重复模式。 JSON 是一个很好的例子,它本质上是一个哈希映射,而哈希映射本身可以包含另一个映射或映射数组。

在 v3.6 之前,如果必须定义一个简单的 JSON 类型,则必须像下面这样:

interface JSONObject { [x: string]: JSONValue; }
interface JSONArray extends Array<JSONValue> { }
type JSONValue = string | number | boolean | JSONObject | JSONArray

如果你尝试将第 1 行和第 2 行的类型在像第 3 那样内联,则可能会出现以下错误:Type alias JSONValue circularly references itself

在 v3.7 中已经有效解决了这个问题,可以像下面这样简单地进行编码:

type JSONValue = string | number | boolean | { [x: string]: JSONValue } | Array<JSONValue>

4. 断言签名

从 v3.7 可用

你应该知道 TypeScript 具有类型保护,可以很好地与 JavaScript 中的 typeofinstanceOf 运算符一起使用。这有助于为函数的参数添加前提条件,以便将其限制为特定的类型。

让我们写一段把上面提到的这些东西都用到的代码,通过添加类型保护来确保给定的输入是日期,并从中提取年份:

function isDate(input: unknown) : asserts input is Date { 
  if (input instanceof Date) 
    return; 
  else 
    throw new Error('Input must be a Date!'); 
} 

function getYear(input: unknown) : number { 
  isDate(input); 
  return input.getFullYear()  // TypeScripts knows that input is Date 
} 


console.log(getYear(new Date('2019-01-01'))); 
console.log(getYear('2019-01-01')); 

上面的代码看起来很不错,但 TypeScript 仍然会提示getFullYear 在未知类型上不可用

从 v3.7 开始,TypeScript 添加了一个名为 asserts 的新关键字,它能够使编译器从断言起就知道正确的类型。对于断言函数,应该添加 asserts <param> as <type> 而不是返回类型。

这样,如果断言通过,TypeScript 将假定参数是前面定义的类型。修改后的代码如下所示:

function isDate(input: unknown) : asserts input is Date { 
  if (input instanceof Date) 
    return; 
  else 
    throw new Error('Input must be a Date!'); 
} 

function getYear(input: unknown) : number { 
  isDate(input); 
  return input.getFullYear()  // TypeScripts knows that input is Date 
} 


console.log(getYear(new Date('2019-01-01'))); 
console.log(getYear('2019-01-01')); 

5. 为 Promise 提供更好的反馈

从 3.6 起改进

在代码中直接使用 Promise 而忘记使用 awaitthen 是常见的错误,如下所示:

interface Customer {
    name: string
    phone: string
}

declare function getCustomerData(id: string): Promise<Customer>;
declare function payCustomer(customer: Customer): void;

async function f() {
    const customer = getCustomerData('c1')
    payCustomer(customer)
}

以前的 TypeScript 完全不了解 Promise,并显示一条与其无关的错误消息,如下所示:
1*L6eF842dDbXm6y__Qz4AFg.png

从 v3. 6 开始,编译器变得非常聪明,可以建议你应该兑现 Promise。注意最新的编译器是如何处理相同的错误的:

1*nxNruKgI0Fmcv2dcFuHPCA.png


下面简单讨论一下不需要深入了解细节的一些功能:

6. Unicode 标识符

从 v3.6 可用

const 𝓱𝓮𝓵𝓵𝓸 = "world"

上面的代码可能不能够在早期版本的 TypeScript 上编译,但是现在你可以从更广泛的 unicode 集中定义标识符。

7. 增量编译

从 v3.4 起可用

如果你在大型项目上使用 TypeScript,则编译器可能需要很长时间才能响应你对该代项目中文件所做的更改。现在有了新的 --incremental 标志,你可以将其添加到 tsc(typescript 编译器)命令行中,这个命令行将会递增地编译修改过的文件。

TypeScript 通过把自从上次编译以来的项目信息保存在代码库内的本地缓存目录中来实现这一目的。在 React 代码库上,一定要记住在 WebpackParcel 进行正确的配置,这样才能在构建管道中利用增量编译。


本文首发微信公众号:前端先锋

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎扫描二维码关注公众号,每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章:


Image placeholder
yunlongw
未设置
  74人点赞

没有讨论,发表一下自己的看法吧

推荐文章
一起来学 TypeScript

鉴于JavaScript社区正式更名为F2E前端,我就大胆的把我另外一个项目也放上来。😄这个项目是关于TypeScript,是个人记录TypeScript的学习历程以及各个常用库的TypeScript

可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

Hyperf 权限管理组件 hyperf-permission 发布

本人正在申请版主,还望各位多评论,收藏,点赞GITHUB:https://github.com/donjan-deng/hyperf-perm...欢迎star,欢迎pr.Hyperf权限管理组件sp

JavaScript中的Infinity(无穷)

Infinity(无穷)在JS中是一个特殊的数字,它的特性是:它比任何有限的数字都大,如果不知道Infinity,我们在一些运算操作遇到时,就会觉得很有意思。现在我们来看看JS中的Infinity属性

Python 使用 CTypes调用 C 方法

CTypes Python中的ctypes模块可能是Python调用C方法中最简单的一种。ctypes模块提供了和C语言兼容的数据类型和函数来加载dll文件,因此在调用时不需对源文件做任何的修改。也正

不使用JavaScript创建常见UI元素功能

我们已经习惯于用JavaScript编写常见的UI元素功能(如手风琴、工具提示、文本截断等),但是随着HTML和CSS有了新的功能以及旧版浏览器不再受支持,我们越来越少使用JavaScript来创建U

使用phpStudy小皮面板,typecho的POST数据提交无反应问题

在安装typecho的过程中,遇到提交数据无反应,页面不报错的问题,十分迷惑。刚开始以为是centos系统文件夹权限问题,反复修改权限都无法解决问题。最后发现是,小皮面板默认开启的防火墙问题,直接关闭

Stylus系列——webpack-spritesmith配合stylus使用示例

一、前言基于Webpack的CSSSprites实现方案,若是直接在html中调用雪碧图图标已经很方便,但是实际开发过程可能遇到需要在伪元素中使用雪碧图,或者需要hover切换另一个图标,这种情况下就

如何给程序中的变量起个好名字?

对一个人来说,名字很重要,俗语说“人如其名”。对程序中的变量而言,名字同样非常重要。 作为开发人员,你要花费大量的敲代码时间来创建变量和考虑给变量起个名字。名字无处不在。你可以命名文件、类、方法和

如何通过 Tampermonkey 快速查找 JavaScript 加密入口

在很多情况下,我们可能想要在网页中自动执行某些代码,帮助我们完成一些操作。如自动抢票、自动刷单、自动爬虫等等,这些操作绝大部分都是借助JavaScript来实现的。那么问题来了?在浏览器里面怎样才能方

10个超好用的配色网站

01MaterialPalette网站地址:http://www.materialpalette.com/MaterialPalette是一款提供MaterialDesign配色的线上工具,它的用法很

Pandas数据分析——超好用的Groupby详解

微信公众号:「Python读财」如有问题或建议,请公众号留言在日常的数据分析中,经常需要将数据根据某个(多个)字段划分为不同的群体(group)进行分析,如电商领域将全国的总销售额根据省份进行划分,分

Python 3.8 新功能

Python3.8是Python编程语言的最新主要版本,它包含许多新功能和优化。 Python3.8 Python3.8的一些新功能包括: 1.海象运算符 Walrus 在这个新版本中,我们有

PHP 7.4 新功能更新列表

PHP7.4,下一个PHP7较小的发布版,期望在2019年11月28日发布。因此,现在是时候让大家深入了解这个版本添加哪些新特性使PHP更快、更可靠。 虽然PHP7.4显著地提升了性能和提高代码可读性

喊话 JavaScript 开发者:玩 DOM 也要专业范儿

别再害怕DOM了,让我们充分挖掘DOM的潜力,你会真的爱上它。 2008年,当我刚成为一名专业Web开发人员参加工作时,我了解一些HTML、CSS和PHP的知识。那时我也在学习JavaScript

JavaScript 的数据结构和算法

现在有个还不是好的项目,未来会成为好的项目的项目想介绍给大家。传送门https://github.com/MasterShu/JavaScript-Da...这个是本人在维护的一个项目。主要是使用Ja

JavaScript 安全知识: CORS 简明教程

概述浏览器会强制同源策略以禁止不同源的网站获得响应; 『同源策略』不会阻止对其他来源的请求,但是会禁用JavaScript对响应内容的读取。 -CORS标头允许访问跨域响应。 -CORS与凭证一起需要

5种用于前端开发的JavaScript替代方案

JavaScript虽然是很受欢迎的语言,但是并不适合所有人,那么有哪些替代方案呢?本文将分析5种JavaScript替代方案。1995年,Netscape(网景通信公司)聘请BrendanEich为

javascript如何判断是不是整数?

方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。functionisInteger(obj){ returnobj%1===0 } isInteger(3);

9 个顶级的JavaScript图表库

数据可视化技术在过去十年中一直在不断改进,现在许多高级图表库可供消费者使用。在2000年代初期,图表生成主要由服务器端图像位图构成。诸如Flash和Silverlight之类的插件提供了更具交互性的图

JavaScript闭包基础指南

闭包是函数创建时范围内所有变量的集合。要使用闭包,请在另一个称为嵌套函数的函数内创建一个函数。内部函数将有权访问外部函数范围中的变量(Closure有助于访问外部函数范围),即使在返回外部函数之后也是

先学php还是javascript?

javascript是前台的东西,PHP是后台的东西,两者先学谁都是一样的。两者之间没有啥实质性的必然联系。Javascript就是浏览器执行的脚本语言,控制页面内容。php就是服务器端执行的语言,读

深入了解JavaScript async/await !

Asyncfunctions让我们以async这个关键字开始。它可以被放置在任何函数前面,像下面这样:asyncfunctionf(){ return1; }在函数前面的「async」这个单词表达了一

JavaScript中对“this”的简单理解

1.this的奥秘很多时候,JS中的this对于咱们的初学者很容易产生困惑不解。this的功能很强大,但需要一定付出才能慢慢理解它。对Java、PHP或其他标准语言来看,this表示类方法中当前对象的