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

2020-08-28 10:25:44 浏览数 (3)

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

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

如果你还不熟悉 TypeScript，这里简单介绍一下：它是一种在 JavaScript 之上通过添加静态类型语法来构建的语言。它的基本理念是，记下值的类型以及它们的使用位置后，可以使用 TypeScript 对代码进行类型检查，并在运行代码之前（甚至在保存文件之前）告诉你代码错误的相关信息。然后，你可以使用 TypeScript 编译器从代码中剥离类型，并为你提供可在任何地方运行的简洁易读的 JavaScript 代码。除了类型检查之外，TypeScript还使用静态类型来支持强大的编辑器工具，例如自动完成、代码导航、重构等。实际上，如果你在 Visual Studio Code 或 Visual Studio 这样的编辑器中使用过 JavaScript，那么你已经用上了类型和 TypeScript 带来的体验。

TypeScript 是当今许多人使用的 JavaScript 技术栈的核心部分。在 npm 上，TypeScript 在 7 月首次实现了超过 5000 万的月下载量！尽管我们知道它总有增长和改进的余地，但很明显，大多数使用 TypeScript 编码的开发人员确实很喜欢它。StackOverflow 的最新开发人员调查将 TypeScript 列为第二受欢迎的语言。在最新的 JS 现状调查中，使用 TypeScript 的开发人员中有大约 89% 表示会再次使用它。

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

以上就是W3Cschool字节宝关于 TypeScript 4.0 发布，有什么新的关注点？的相关介绍了，希望对大家有所帮助。

JavaScript

0 人点赞