開源互助社區>資訊>軟件資訊

TypeScript 3.5 發布，速度提升、工具智能

←手機掃碼閱讀 admin @ 2019-05-31 , reply:0

TypeScript 3.5 發布了，此版本在編譯器、語言和編輯器工具上帶來了一些新特性。

速度提升

TypeScript 3.5 引入了幾種對於 type 檢查和增量構建的優化，使得速度大幅提升。

type 檢查加速

TypeScript 3.4 中的意外地引入了一個回退，它可能導致 type 檢查器執行的工作量增加，並增加相應的 type 檢查時間，這使得使用樣式組件庫的用戶受到較大的影響。

該回退非常嚴重，不僅因為它導致 TypeScript 代碼的構建時間變長很多，也使得 TypeScript 與 JavaScript 用戶的編輯器操作變得很慢。

此版本重點關注優化了某些代碼路徑並將某些功能剝離，使得 TypeScript 3.5 在進行許多增量檢查的時候比 TypeScript 3.3 更快。與 3.4 相比，不僅編譯時間減少，而且代碼自動補全與任何其它編輯器操作也變得更快。

--incremental 改進

TypeScript 3.4 引入了一個新的 --incremental 編譯器選項，此選項將一堆信息保存到 .tsbuildinfo 文件中，該文件可用於加快對 tsc 的後續調用。

3.5 版本中有幾個優化用來緩存編譯器設置狀態、查找文件的原因，以及找到文件的位置等信息。測試結果表示，在 --build 模式下使用 TypeScript 的項目引用的數百個場景中，與 TypeScript 3.4 相比，重新構建時間可減少 68％。

Omit helper type

很多時候，我們想要創建一個省略某些屬性的對象，TypeScript 內置的 Pick 和 Exclude helper 可以完成類似的功能。例如，如果我們想要定義一個沒有 location 屬性的 Person，可以編寫以下內容：


type Person = {
    name: string;
    age: number;
    location: string;
};

type RemainingKeys = Exclude<keyof Person, "location">;

type QuantumPerson = Pick<Person, RemainingKeys>;

// equivalent to
type QuantumPerson = {
    name: string;
    age: number;
};

這裡使用 Exclude helper type 從 Person 的屬性集中去掉了「location」屬性，之後使用 Pick helper type 從 Person 中選中剩下的屬性集。

這種 type 的操作經常出現，用戶將編寫一個 Omit helper type 來完成操作：


type Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;

TypeScript 3.5 中，lib.d.ts 內置了一個 Omit type，並且可以在任何地方使用，開發者不再需要自己編寫。

讓每個人都定義自己的 Omit 版本，TypeScript 3.5將在lib.d.ts中包含它自己的版本，可以在任何地方使用。編譯器本身將使用此 Omit type 來表示通過泛型上的對象 rest 析構聲明創建的 type。

改進了聯合 type 中的多餘屬性檢查

TypeScript 在對象中有一個稱為多餘屬性檢查的功能，此功能旨在檢測 type 不符合特定屬性時的問題。


type Style = {
    alignment: string,
    color?: string
};

const s: Style = {
    alignment: "center",
    colour: "grey"
//  ^^^^^^ error! 
};

在 TypeScript 3.4 及更早版本中允許某些多餘的屬性。如下，TypeScript 3.4 允許對象中的 name 屬性不正確，即使它的 type 在 Point 和 Label 之間都不匹配。


type Point = {
    x: number;
    y: number;
};

type Label = {
    name: string;
};

const thing: Point | Label = {
    x: 0,
    y: 0,
    name: true // uh-oh!
};

因為不會對成員進行任何多餘的屬性檢查，所以錯誤的 name 不會被在意，但在 TypeScript 3.5 中，現在 type 檢查器至少會驗證所有提供的屬性是否屬於某個聯合成員並具有適當的類型，這意味著上面的示例將會拋出錯誤。

需要注意的是，只要屬性 type 有效，仍允許部分重疊：


const pl: Point | Label = {
    x: 0,
    y: 0,
    name: "origin" // okay
};

--allowUmdGlobalAccess flag

使用新的 --allowUmdGlobalAccess flag，現在可以像下邊這樣從任何地方，甚至模塊里引用 UMD 全局聲明：


export as namespace foo;

泛型構造函數的高階類型推導

TypeScript 3.5 中將對泛型構造函數的推導操作整合了起來：


class Box<T> {
    kind: "box";
    value: T;
    constructor(value: T) {
        this.value = value;
    }
}

class Bag<U> {
    kind: "bag";
    value: U;
    constructor(value: U) {
        this.value = value;
    }
}


function composeCtor<T, U, V>(
    F: new (x: T) => U, G: new (y: U) => V): (x: T) => V {
    
    return x => new G(new F(x))
}

let f = composeCtor(Box, Bag); // has type '<T>(x: T) => Bag<Box<T>>'
let a = f(1024); // has type 'Bag<Box<number>>'

除了上面的組合模式之外，這種對泛型構造函數的新推導意味著在某些 UI 庫（如 React）中對類組件進行操作的函數可以更正確地對泛型類組件進行操作。


type ComponentClass<P> = new (props: P) => Component<P>;
declare class Component<P> {
    props: P;
    constructor(props: P);
}

declare function myHoc<P>(C: ComponentClass<P>): ComponentClass<P>;

type NestedProps<T> = { foo: number, stuff: T };

declare class GenericComponent<T> extends Component<NestedProps<T>> {
}

// type is 'new <T>(props: NestedProps<T>) => Component<NestedProps<T>>'
const GenericComponent2 = myHoc(GenericComponent);