带你看看 TypeScript 5.0 的新特性(带你看看房间英语怎么写)

带你看看 TypeScript 5.0 的新特性 一、写在前面

推荐整理分享带你看看 TypeScript 5.0 的新特性(带你看看房间英语怎么写)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:带你看看火星的真实地貌,带你看看真实的缅北,看到这样你还敢去吗?,带你看看黄圣依住的豪宅,带你看看长沙交谊舞厅,带你看看于震住的豪宅,带你看看长沙交谊舞厅,带你看看历史,带你看看西方极乐世界,内容如对您有帮助，希望把文章链接给更多的朋友！

TypeScript 5.0 已经于 2023 年 3 月 16 日发布了，带来了许多新功能，同时也在性能方面进行了优化，下面让我们来一起看看新版 TypeScript 中比较有重要的变化吧。

二、新特性2-1、速度、包体积优化

首先是新版本性能的提升，5.0 版本在构建速度、包体积方面都有着不错的优化，下面这张表格是 5.0 版本相对于 4.9 的性能提升幅度：

项目相对于 TS 4.9 的优化幅度material-ui 构建时间90%TypeScript 编译器启动时间89%TypeScript 编译器自构建时间87%Outlook Web 构建时间82%VS Code 构建时间80%npm 包大小59%

TypeScript 5.0 具体做了什么来优化性能呢？

首先是将namespace迁移到module，这样可以应用更多现代构建工具的特性来进行优化（如作用域提升），并移除一些已弃用的代码，将包大小减少了约 26.4 MB。其次是 TS 精简了编译器内部的对象所存储的数据，减少了内存使用量。然后是在一些特定领域进行优化，如在闭包中偶尔使用var，而不是let或const来提高解析性能。

总的来说，大多数 TypeScript 项目都能从 TypeScript 5.0 中获得 10％ 到 20％ 性能提升。

2-2、新的装饰器标准

装饰器这个东西，写 ts 的小伙伴一定不会陌生，虽然它还不是一个标准的 js 特性，但 ts 已经在之前的版本就支持了“实验性”装饰器。而在最新的 5.0 版本中，装饰器语法将不再是一个“实验性”的语法，也不需要在编译选项中加入--experimentalDecorators配置项了（虽然在新版本，这个编译选项依旧会存在），TypeScript 5.0 将会原生支持装饰器语法！

下面让我们来看一个装饰器的例子吧——

首先我们有一个很简单的类：

class Person { name: string; constructor(name: string) { this.name = name; } greet() { console.log(`Hello, my name is ${this.name}.`); }}const p = new Person("zy");p.greet();

我们想在这个类的greet函数中加点日志，并记录调用函数的名称，那么最简单的方式是这样做：

class Person { name: string; constructor(name: string) { this.name = name; } greet() { console.log("LOG: Entering method greet."); console.log(`Hello, my name is ${this.name}.`); console.log("LOG: Exiting method greet."); }}const p = new Person("zy");p.greet();

但如果我们想给更多的函数都加上类似的功能，那用装饰器就非常合适了，比如我们可以编写一个loggedMethod，如下所示：

function loggedMethod( originalMethod: any, context: ClassMethodDecoratorContext) { const methodName = String(context.name); function replacementMethod(this: any, ...args: any[]) { console.log(`LOG: Entering method '${methodName}'.`); const result = originalMethod.call(this, ...args); console.log(`LOG: Exiting method '${methodName}'.`); return result; } return replacementMethod;}

这样我们用loggedMethod这个装饰器来装饰这个函数，就可以实现上述效果了：

class Person { name: string; constructor(name: string) { this.name = name; } @loggedMethod greet() { console.log(`Hello, my name is ${this.name}.`); }}const p = new Person("zy");p.greet();// Output://// LOG: Entering method 'greet'.// Hello, my name is zy.// LOG: Exiting method 'greet'.

我们甚至可以创建一个“返回装饰器函数的函数”，这样我们就可以为装饰器开发更多定制化更多的功能，比如说，我想自定义输出到控制台的字符串的前缀：

function loggedMethod(headMessage = "LOG:") { return function actualDecorator( originalMethod: any, context: ClassMethodDecoratorContext ) { const methodName = String(context.name); function replacementMethod(this: any, ...args: any[]) { console.log(`${headMessage} Entering method '${methodName}'.`); const result = originalMethod.call(this, ...args); console.log(`${headMessage} Exiting method '${methodName}'.`); return result; } return replacementMethod; };}

这样我们在loggedMethod被用作装饰器之前调用它，就可以实现传入定制的字符串作为控制台输出字符串的前缀了：

class Person { name: string; constructor(name: string) { this.name = name; } @loggedMethod("LOG:") greet() { console.log(`Hello, my name is ${this.name}.`); }}const p = new Person("zy");p.greet();// Output://// LOG: Entering method 'greet'.// Hello, my name is zy.// LOG: Exiting method 'greet'.2-3、const类型参数

在推断对象的类型时，ts 通常会选择一种通用的类型。例如，在这种情况下，会将names的类型推断为string []：

type HasNames = { readonly names: string[] };function getNamesExactly<T extends HasNames>(arg: T): T["names"] { return arg.names;}// Inferred type: string[]const names = getNamesExactly({ names: ["Alice", "Bob", "Eve"] });

推断成string []固然没有问题，但由于names是readonly的，而推断出的类型不是readonly的，这就会产生一些困扰。虽然我们可以通过添加as const来解决这个问题，就像这样：

// The type we wanted:// readonly ["Alice", "Bob", "Eve"]// The type we got:// string[]const names1 = getNamesExactly({ names: ["Alice", "Bob", "Eve"] });// Correctly gets what we wanted:// readonly ["Alice", "Bob", "Eve"]const names2 = getNamesExactly({ names: ["Alice", "Bob", "Eve"] } as const);

但这样写很麻烦，且容易被忘掉。所以在 TypeScript 5.0 中，我们可以将const修饰符直接添加到类型参数