作者|OghenevwedeEmeni、蓬草
译者|核可乐
策划|丁晓云
谷歌上周发布了 TypeScript 5.0 beta 版本,希望在帮助其减肥的同时简化其使用并加快运行速度。 此次发布的测试版还引入了新的装饰器标准,使用户能够以可重用的形式自定义类及其成员。
相对于 TypeScript 4.9 的速度和大小改进:
该测试版的亮点之一是纳入了新的装饰器标准,该标准使用户能够以可重用的形式自定义类及其成员。 TypeScript 项目总监 Daniel Rosenwasser 最近在官方博客上写道,这个实验性装饰器非常重要。 在支持旧版本装饰器的同时,仍然启用可选的编译器标志——experimentalDecorators。 Rosenwasser 表示,许多仍在使用 --experimentalDecorators 的开发人员很早就意识到,在 TypeScript 中使用装饰器而不启用此标志会导致错误消息。
Rosenwasser 还提到了 TypeScript 中关于枚举的老问题,5.0beta 版本如何解决其中一些问题,同时减少声明各种枚举时需要理解的概念数量。
TypeScript 是开源编程语言加 JavaScript 的超集。 它基于JavaScript并具有扩展功能。 它目前由 Google 开发和维护。
TypeScript 5.0 中的新装饰器提案允许开发人员编写更清晰、更易于维护的代码,并以可重用的形式自定义类及其成员。 事实上,新的装饰器与 --emitDecoratorMetadata 不兼容,并且不支持参数装饰,但 Google 期望后续的 ECMAScript 提案能够解决此限制。
除了新的装饰器提案之外,TypeScript 5.0 还引入了许多改进,例如对构造函数中的参数装饰器进行更准确的类型检测、const 注释以及允许 extends 数组获取多个条目的功能。
TypeScript 5.0 版本还提供了新的模块解析选项、性能改进和更详细的 switch/case 完成。
TypeScript 的目标是 ECMAScript 2018,因此 Node.js 用户至少需要使用 Node.js10 或更高版本。
要使用此测试版,可以通过 NuGet 或以下 npm 命令获取:
npm install typescript@beta
TypeScript5.0
新功能和改进的快速演示
在这里,我们详细探讨了一些新功能,并通过代码示例帮助您开始 TypeScript 5.0 之旅。
1.所有枚举都是unionenum
TypeScript5.0引入了一个新功能,其中所有枚举都是unionenum。 这意味着每个枚举成员现在都有自己唯一的类型,即使是通过函数调用初始化的。 前几年,如果是通过函数调用初始化的枚举成员,TypeScript 会使用旧的枚举策略,导致联合和文字类型的优点失效。 在新功能的支持下,开发人员现在可以缩小所有枚举范围并将其成员称为类型。
enum E {
A = 'a',
B = 'b',
C = Math.random() > 0.5 ? 'c' : 'd'
}
type EKeys = keyof typeof E; // 'A' | 'B' | 'C'
type EValues = typeof E[keyof typeof E]; // 'a' | 'b' | 'c' | 'd'
function f(e: E) {
switch (e) {
case E.A:
// This block is only executed if `e` is `'a'`
break;
case E.B:
// This block is only executed if `e` is `'b'`
break;
case E.C:
// This block is only executed if `e` is either `'c'` or `'d'`
break;
}
}
在上面的例子中,enumE有3个成员,其中EC是通过三元运算符通过函数调用来初始化的。 通过 TypeScript 5.0 中的一项新功能,所有枚举成员都有自己的奇特类型。 在这里,EC 的类型是“c”|“d”,而不是旧版本中的字符串类型。 f 函数使用 switch 语句将 e 的类型缩小为枚举成员之一,从而实现更好的类型检测和推断。
2. 从构造函数推断类属性
TypeScript 5.0 引入了在类型参数声明中添加 const 修饰符的功能,即默认进行类 const 推理。 这个特性非常适合那些需要特定类型的场景,而 TypeScript 已经确定了更通用的类型。 前几年,为了实现类似const的推测,开发者需要在一些地方加上“asconst”。 const 修饰符影响调用中编译的对象、数组和基元表达式的推理typescript构造方法,但不拒绝可变值,或需要不可变约束。 因此,开发人员必须牢记 const 修饰符的行为以确保正确使用。
type HasNames = { readonly names: string[] };
function getNamesExactly(arg: T): T['names'] {
return arg.names;
}
// Inferred type: readonly ["Alice", "Bob", "Eve"]
const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] } as const);
在此示例中,我们定义了一个类库函数 getNamesExactly,它采用 T 类型的参数来扩充 HasNames 套接字,其中包含字符串链接列表作为名称属性。
在 TypeScript 5.0 之前,arg.names 的推导类型为 string[],但如果我们需要 readonlystring[],则需要在调用函数时使用 asconst 来确定。
在 TypeScript 5.0 中,我们可以在类型参数声明中添加 const 修饰符,以默认执行类似 const 的计算。 这使得可以在调用中省略 asconst 断言typescript构造方法,并始终推断出更具体的 readonlystring[] 类型。
3.详细的switch/case完成
在编写 switch 语句时,TypeScript 现在可以测量正在检查的值是否具有文字类型。 如果是,则对每个未发现的案例进行脚手架搭建直至完成。
具体实现可以参考GitHub()。
4. 支持导出类型*
TypeScript 5.0 提供了新的“导出类型”功能,该功能还增加了对重新导入的句子中仅类型导出的支持,例如从“模块”导出和从“模块”导出 *asns。
一个示例是从 cars.ts 模块导入的 Spaceship 类,然后使用 exporttype *asvehiclesfrom "./vehicles" 在 models/index.ts 模块中重新导入。 在 main.ts 中,导出重新导入的车辆命名空间并用于对 takeASpaceship 函数中的参数进行类型检查。 但请注意,在 makeASpaceship 函数中创建新的 Spaceship 对象将导致错误,因为 cars 命名空间作为仅类型导出导入,不能用作值。
// models/vehicles.ts
export class Spaceship {
// ...
}
// models/index.ts
export type * as vehicles from "./vehicles";
// main.ts
import { vehicles } from "./models";
function takeASpaceship(s: vehicles.Spaceship) {
// ok - `vehicles` only used in a type position
}
function makeASpaceship() {
return new vehicles.Spaceship(); // Error: 'vehicles' cannot be used as a value because it was exported using 'export type'.
}
5. 多配置扩展
TypeScript 5.0 现在支持使用 extends 数组扩展多个配置文件。 此功能对于同时管理多个项目非常有用,其中可以创建“基本”配置文件并通过其他 tsconfig.json 文件进行扩充。 过去,这只能通过单个文件来完成,但现在您可以扩展到多个文件,并且如果发生数组冲突,则最后一个条目优先。
例如,如果您有一个从 @tsconfig/stricttest/tsconfig.json 扩充的基本 sconfig.base.json 文件,则可以从这两个文件进一步扩充其他 tsconfig.json 文件,如下所示:
{
"extends": ["@tsconfig/strictest/tsconfig.json", "../../../tsconfig.base.json"],
"compilerOptions": {
"outDir": "../lib",
// ...
}
}
这使得在管理多个配置文件、通过多个文件进行扩充以及轻松控制阵列优先级方面具有更大的灵活性。
6. 性能提升
TypeScript 5.0 提供了多项性能改进,包括更快的对象类型索引和优化的条件类型推断。
以上只是TypeScript 5.0的部分新功能和改进,更多详细信息请参阅官方公告页面。
参考链接:
@caopengau/typescript-5-0-a-quick-demo-of-new-features-and-improvements-fbb841728ea
明天好文章推荐