TypeScript4.0的新功能怎么使用

這篇文章主要介紹“TypeScript4.0的新功能怎么使用”，在日常操作中，相信很多人在TypeScript4.0的新功能怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”TypeScript4.0的新功能怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

4.0 版本的主要更新內容如下：

• 可變參數元組類型

• 標記的元組元素

• 構造函數的類屬性推斷

• 短路分配運算符

• catch 子句中的unknown

• 定制 JSX 工廠

• 帶--noEmitOnError參數build模式下的速度提升

• --incremental with --noEmit

• 編輯器改進

• 轉換為可選鏈接

• 支持/** @deprecated */

• 啟動時的部分編輯模式

• 更智能的自動導入

• Breaking Changes

構造函數的類屬性推斷

當 noImplicitAny 被啟用時，TypeScript 4.0 現在可以使用控制流分(control flow analysis)析來確定類中的屬性類型。

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


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

如果并非將構造函數的所有路徑都分配給實例成員，則該屬性可能被視為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中，可能會需要顯式類型注釋以及定值賦值斷言(!)

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;
    }
}

短路分配運算符

JavaScript 和其他很多語言都支持復合賦值運算符。復合賦值運算符將一個運算符應用到兩個參數上，然后將結果賦值到左邊。如下：

/ 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 中的許多運算符都有一個對應的賦值運算符，但有三個例外：邏輯和(&&)、邏輯或(||)，以及空值合并(??)。

TypeScript 4.0 為上述三個運算符增加了對應的賦值運算符支持：

let values: string[];


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


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


// actually equivalent to


a || (a = b);

到此，關于“TypeScript4.0的新功能怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！