精讀《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

若是你想參與討論，請點擊這裏，每週都有新的主題，週末或週一發佈。前端精讀 - 幫你篩選靠譜的內容。