TypeScript 4.0 来了，有什么新的关注点？

（给前端大全加星标，提升前端技能）

转自：开源中国

整体看来，此版本在兼容性方面没有特别大的变化。因为 TypeScript 团队表示新版本继续使用与过去版本相似的版本控制模型，可将 4.0 视作 3.9 的延续升级版本。

而且他们也一直在追求不牺牲主要灵活性的情况下，提供一个最大限度减少 breaking changes 的升级路径。

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

- EOF -

推荐阅读  点击标题可跳转

觉得本文对你有帮助？请分享给更多人

关注「前端大全」加星标，提升前端技能

好文章，我在看❤️