TypeScript 4.0 發(fā)布了，有什么新的關(guān)注點(diǎn)？

整體看來(lái)，此版本在兼容性方面沒(méi)有特別大的變化。因?yàn)?TypeScript 團(tuán)隊(duì)表示新版本繼續(xù)使用與過(guò)去版本相似的版本控制模型，可將 4.0 視作 3.9 的延續(xù)升級(jí)版本。

而且他們也一直在追求不犧牲主要靈活性的情況下，提供一個(gè)最大限度減少 breaking changes 的升級(jí)路徑。

如果你還不熟悉 TypeScript，這里簡(jiǎn)單介紹一下：它是一種在 JavaScript 之上通過(guò)添加靜態(tài)類型語(yǔ)法來(lái)構(gòu)建的語(yǔ)言。它的基本理念是，記下值的類型以及它們的使用位置后，可以使用 TypeScript 對(duì)代碼進(jìn)行類型檢查，并在運(yùn)行代碼之前（甚至在保存文件之前）告訴你代碼錯(cuò)誤的相關(guān)信息。然后，你可以使用 TypeScript 編譯器從代碼中剝離類型，并為你提供可在任何地方運(yùn)行的簡(jiǎn)潔易讀的 JavaScript 代碼。除了類型檢查之外，TypeScript還使用靜態(tài)類型來(lái)支持強(qiáng)大的編輯器工具，例如自動(dòng)完成、代碼導(dǎo)航、重構(gòu)等。實(shí)際上，如果你在 Visual Studio Code 或 Visual Studio 這樣的編輯器中使用過(guò) JavaScript，那么你已經(jīng)用上了類型和 TypeScript 帶來(lái)的體驗(yàn)。

TypeScript 是當(dāng)今許多人使用的 JavaScript 技術(shù)棧的核心部分。在 npm 上，TypeScript 在 7 月首次實(shí)現(xiàn)了超過(guò) 5000 萬(wàn)的月下載量！盡管我們知道它總有增長(zhǎng)和改進(jìn)的余地，但很明顯，大多數(shù)使用 TypeScript 編碼的開發(fā)人員確實(shí)很喜歡它。StackOverflow 的最新開發(fā)人員調(diào)查將 TypeScript 列為第二受歡迎的語(yǔ)言。在最新的 JS 現(xiàn)狀調(diào)查中，使用 TypeScript 的開發(fā)人員中有大約 89% 表示會(huì)再次使用它。

4.0 版本的主要更新內(nèi)容如下：

• 可變參數(shù)元組類型
• 標(biāo)記的元組元素
• 構(gòu)造函數(shù)的類屬性推斷
• 短路分配運(yùn)算符
• catch 子句中的unknown
• 定制 JSX 工廠
• 帶--noEmitOnError參數(shù)build模式下的速度提升
• --incremental with --noEmit
• 編輯器改進(jìn)
  • 轉(zhuǎn)換為可選鏈接
  • 支持/** @deprecated */
  • 啟動(dòng)時(shí)的部分編輯模式
  • 更智能的自動(dòng)導(dǎo)入
• Breaking Changes

構(gòu)造函數(shù)的類屬性推斷

當(dāng) noImplicitAny 被啟用時(shí)，TypeScript 4.0 現(xiàn)在可以使用控制流分(control flow analysis)析來(lái)確定類中的屬性類型。

class Square {
    // Previously: implicit any!
    // Now: inferred to `number`!
    area;
    sideLength;


    constructor(sideLength: number) {
        this.sideLength = sideLength;
        this.area = sideLength ** 2;
    }
}

如果并非將構(gòu)造函數(shù)的所有路徑都分配給實(shí)例成員，則該屬性可能被視為undefined。

class Square {
    sideLength;


    constructor(sideLength: number) {
        if (Math.random()) {
            this.sideLength = sideLength;
        }
    }


    get area() {
        return this.sideLength ** 2;
        //     ~~~~~~~~~~~~~~~
        // error! Object is possibly 'undefined'.
    }
}

在更清楚的情況下（例如具有某種initialize方法），如果位于strictPropertyInitialization中，可能會(huì)需要顯式類型注釋以及定值賦值斷言(!)

class Square {
    // definite assignment assertion
    //        v
    sideLength!: number;
    //         ^^^^^^^^
    // type annotation


    constructor(sideLength: number) {
        this.initialize(sideLength)
    }


    initialize(sideLength: number) {
        this.sideLength = sideLength;
    }


    get area() {
        return this.sideLength ** 2;
    }
}

短路分配運(yùn)算符

JavaScript 和其他很多語(yǔ)言都支持復(fù)合賦值運(yùn)算符。復(fù)合賦值運(yùn)算符將一個(gè)運(yùn)算符應(yīng)用到兩個(gè)參數(shù)上，然后將結(jié)果賦值到左邊。如下：

/ Addition
// a = a + b
a += b;


// Subtraction
// a = a - b
a -= b;


// Multiplication
// a = a * b
a *= b;


// Division
// a = a / b
a /= b;


// Exponentiation
// a = a ** b
a **= b;


// Left Bit Shift
// a = a << b
a <<= b;

JavaScript 中的許多運(yùn)算符都有一個(gè)對(duì)應(yīng)的賦值運(yùn)算符，但有三個(gè)例外：邏輯和(&&)、邏輯或(||)，以及空值合并(??)。

TypeScript 4.0 為上述三個(gè)運(yùn)算符增加了對(duì)應(yīng)的賦值運(yùn)算符支持：

let values: string[];


// Before
(values ?? (values = [])).push("hello");


// After
(values ??= []).push("hello");
a ||= b;


// actually equivalent to


a || (a = b);

以上就是W3Cschool編程獅關(guān)于 TypeScript 4.0 發(fā)布，有什么新的關(guān)注點(diǎn)？的相關(guān)介紹了，希望對(duì)大家有所幫助。