关于javascript:TypeScript-新品尝鲜

31次阅读

共计 2815 个字符,预计需要花费 8 分钟才能阅读完成。

还记得我在《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 版本,届时会新增哪些有意思的新个性?且听下回分解:)

正文完
 0