精读《Typescript 3.2 新特性》

1 引言

Typescript 3.2 发布了几个新特性，主要变化是类型检查更严格，对 ES六、ES7 一些时髦功能拓展了类型支持。

2 概要

下面挑一些相对重要配置介绍。

strictBindCallApply

对 bind call apply 更严格的类型检测。

好比以下能够检测出 apply 函数参数数量和类型的错误：

function foo(a: number, b: string): string {
  return a + b;
}

let a = foo.apply(undefined, [10]); // error: too few argumnts

特别对一些 react 老代码，函数须要本身 bind(this)，在没有用箭头函数时，可能常用 this.foo = this.foo.bind(this)，这时类型可能会不许，但升级到 TS3.2 后，能够准确捕获到错误了。

Object spread 类型自动合并

如今 Object spread 类型能够自动合并了：

// Returns 'T & U'
function merge<T, U>(x: T, y: U) {
  return { ...x, ...y };
}

Object rest 类型自动剔除

const { x, y, z, ...rest } = obj;

当咱们使用了 Object rest 语法时，rest 的类型实际上是 obj 类型剔除了 x y z 这三个 key 的类型，如今 ts 已经能自动作到了！

下面是实现方式：

interface XYZ {
  x: any;
  y: any;
  z: any;
}

type DropXYZ<T> = Pick<T, Exclude<keyof T, keyof XYZ>>;

function dropXYZ<T extends XYZ>(obj: T): DropXYZ<T> {
  let { x, y, z, ...rest } = obj;
  return rest;
}

经过 Pick & Exclude 达到剔除 obj 属性的效果，具体能够参考以前的精读：精读《Typescript2.0 - 2.9》。

tsconfig 配置集成支持 node_modules

这是一个福音，以往在 tsconfig.json 为了继承一个配置，咱们须要这么写：

{
  "extends": "../node_modules/@my-team/tsconfig-base/tsconfig.json"
}

TS3.2 内置了 node_modules 解析，所以就能够更清晰的描述了：

{
  "extends": "@my-team/tsconfig-base"
}

内置 BigInt 类型

新增了 bigint 类型，不再会把 bigint 和 number 混淆了。

declare let foo: number;
declare let bar: bigint;

foo = bar; // error: Type 'bigint' is not assignable to type 'number'.
bar = foo; // error: Type 'number' is not assignable to type 'bigint'.

3 精读

此次改动意图很是明显，是为了跟上 JS 的新语法。随着 JS 规范发展，TS 类型必然要获得补充，像 Object spread 与 Object rest 在项目中使用已经很是广泛了，及时完善类型支持，有助于对项目类型的约束。

strictBindCallApply 基本能够算是对 React 社区的回馈。在 React 很早期的版本是支持函数自动 bind 的，后来以为过于 magic 就移除了，因为当时没有箭头函数，你们只好在调用处 .bind(this) 一下。

后来有人发现 .bind(this) 会致使函数引用变化，对 Mutable 性能优化不友好，因此许多代码都在 constructor 位置进行相似 this.fooBind = this.foo.bind(this) 这样的赋值，现在 TS3.2 对这种 bind 事后的函数也具有了严格的类型推测，将会有一大批代码从中受益。

顺带一提，最近 Babel 7.2.0 发布，也带来了一些新特性支持，好比：

提早支持私有属性：

class Person {
  #age = 19;

  #increaseAge() {
    this.#age++;
  }

  birthday() {
    this.#increaseAge();
    alert("Happy Birthday!");
  }
}

提早支持 pipleline Operator：

const result = 2 |> double |> 3 + # |> toStringBase(2, #); // "111"

整个 JS 生态一篇欣欣向荣的景象。不过 TS 对 ES 规范支持仍是比较保守的，好比 Babel 6.x 就支持的 optional chain，如今也没有获得支持，缘由是 “等待进入 Stage3”。追踪 ISSUE 能够参考：https://github.com/Microsoft/...

若是不清楚 Stage3 的含义，能够阅读前端精读以前的一篇文章：精读 TC39 与 ECMAScript 提案。

4 总结

此次的版本升级几乎没带来什么新语法，只是纯粹的类型检测能力加强，因此若是但愿进一步提升代码质量，就尽快升级把。

讨论地址是： 精读《Typescript 3.2 新特性》 · Issue #117 · dt-fe/weekly

若是你想参与讨论，请点击这里，每周都有新的主题，周末或周一发布。前端精读 - 帮你筛选靠谱的内容。