TypeScript 3.3來了！快看看有什麼新功能

翻譯：瘋狂的技術宅
原文： https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript

---

本文首發微信公衆號：jingchengyideng
歡迎關注，天天都給你推送新鮮的前端技術文章

---

改進了調用聯合類型的行爲

在TypeScript的早期版本中，不一樣的聯合類型若是想互相訪問其取值，它們參數的取值列表必須徹底一致才行。

type Fruit = "apple" | "orange";
type Color = "red" | "orange";

type FruitEater = (fruit: Fruit) => number;     // 吃水果並對它們排名
type ColorConsumer = (color: Color) => string;  // 處理顏色並對其進行描述

declare let f: FruitEater | ColorConsumer;

// Cannot invoke an expression whose type lacks a call signature.
// 沒法調用這個表達式，由於缺乏調用簽名類型。
// Type 'FruitEater | ColorConsumer' has no compatible call signatures.ts(2349)
// 類型 'FruitEater | ColorConsumer' 沒有兼容的調用簽名.ts（2349）
f("orange");

無論怎樣，在上面的例子中，FruitEater 和 ColorConsumer 都應該可以接受字符串"orange"，並返回 number 或 string 類型纔對。

在TypeScript 3.3中，下面這段代碼將再也不會報錯。

type Fruit = "apple" | "orange";
type Color = "red" | "orange";

type FruitEater = (fruit: Fruit) => number;     // 吃水果並對它們排名
type ColorConsumer = (color: Color) => string;  // 處理顏色並對其進行描述

declare let f: FruitEater | ColorConsumer;

f("orange"); // 能夠正常工做！將返回一個'number | string'.

f("apple");  // error - Argument of type '"red"' is not assignable to parameter of type '"orange"'.

f("red");    // error - Argument of type '"red"' is not assignable to parameter of type '"orange"'.

在TypeScript 3.3中，這些參數會互相交織在一塊兒而後建立新簽名。

在上面的例子中， fruit 和 color 的參數列表會被交叉到一塊兒產生新的 Fruit＆Color 類型的參數。 Fruit & Color會處理爲 ("apple" | "orange") & ("red" | "orange") ，它等同於("apple" & "red") | ("apple" & "orange") | ("orange" & "red") | ("orange" & "orange")。 那些不可能的組合被處理成 never，到最後留下了 "orange" & "orange" 這個組合，結果只能是 "orange"。

注意
當聯合中最多隻有一個類型具備多個重載時，這種新行爲纔會出現，而且聯合中最多隻能有一個類型具備通用簽名。 這意味着 number[] | string[]這種形式 ，在 map （通用）這樣的方法中仍然不能夠調用。

另外一方面，在 forEach 這樣的方法中如今能夠調用，可是在 noImplicitAny 下可能存在一些問題。

interface Dog {
    kind: "dog"
    dogProp: any;
}
interface Cat {
    kind: "cat"
    catProp: any;
}

const catOrDogArray: Dog[] | Cat[] = [];

catOrDogArray.forEach(animal => {
    //                ~~~~~~ error!
    // 參數'animal'隱式含有'any'類型。
});

在TypeScript 3.3中，這仍然很嚴格，添加顯式類型註釋將解決這個問題。

interface Dog {
    kind: "dog"
    dogProp: any;
}
interface Cat {
    kind: "cat"
    catProp: any;
}

const catOrDogArray: Dog[] | Cat[] = [];
catOrDogArray.forEach((animal: Dog | Cat) => {
    if (animal.kind === "dog") {
        animal.dogProp;
        // ...
    }
    else if (animal.kind === "cat") {
        animal.catProp;
        // ...
    }
});

使用 --build --watch 檢查複合項目的增量文件

TypeScript 3.0 引入了一個用於構建過程的被稱爲「複合項目」的新功能。 其目的之一是確保用戶能夠將大型項目拆分爲更小的部分，從而可以快速構建，同時保留項目結構，而不會影響現有的 TypeScript 體驗。 正式由於有了複合項目，TypeScript 能夠用 --build 模式僅從新編譯部分項目和依賴項集。 您能夠把它視爲對項目間構建的優化。

TypeScript 2.7還引入了 --watch 模式，經過新的增量「構建器」API進行構建。 該模式只從新檢查和傳送被修改的，可能會影響類型檢查的源碼文件和依賴。 您能夠將其視爲對項目內構建的優化。

在3.3版本以前，在使用 --build --watch 構建複合項目時，實際上並無使用這種監視增量文件的基礎結構。 在 --build --watch 模式下，若是一個項目中有了更新，將會強制徹底從新構建該項目，而不是檢查項目中有哪些文件受到影響。

在TypeScript 3.3中， --build 模式的 --watch 標誌也能夠利用增量文件機制進行監視了。 這可能意味着在 --build --watch 模式下構建速度能將會更快。 在咱們的測試中，此功能使--build --watch 的構建時間比原來縮短了50％到75％。 您能夠閱讀與文件修改時的原始拉取請求相關的更多內容來查看這些數據，咱們相信大多數使用複合項目的用戶將會在此處獲得更好的體驗。

---

本文首發微信公衆號：jingchengyideng歡迎關注，天天都給你推送新鮮的前端技術文章關注後回覆「體系」，檢查本身的前端知識體系是否完整