TypeScript 5.2 有哪些新特性 - 显式的资源管理

吉灵云2024-01-28 9:44


显式的资源管理的英文名字是：Explicit Resource Management。该特性在ECMAScript的提案中还处于Stage3阶段，虽然TypeScript 5.2版本已经实现了该特性，但是TypeScript只能在语法层面进行支持，对于新的变量、新的函数，还需要JavaScript运行环境支持，否则只能使用Polyfill。

[Symbol.dispose]()方法

我们在用Node.js做本地开发或者服务端开发的时候，时常需要打开本地文件，对文件的数据进行操作，然后还需要关闭文件。关闭文件的操作我们很容易忘记，不关闭文件会导致内存不能回收，如果重复不断地运行这段程序，那内存很快会耗尽。现在的计算机语言都在竭尽全力的帮助程序员尽量方便的对内存进行回收，JavaScript、TypeScript也不例外。

举例如下，我们之前要打开一个文件，往往需要这样写代码：

typescript 复制代码 
import * as fs from "fs";

export function doSomeWork() {
    const path = ".some_temp_file";
    const file = fs.openSync(path, "w+");
	//
    // 操作文件数据，这里很容易提前return
	//
	//
    // 关闭文件。很容易被遗漏
    fs.closeSync(file);
	// 删除文件
    fs.unlinkSync(path);
}

函数起始位置先打开文件，末尾关闭文件。但是如果有其他程序员不小心在代码中间部位提前return，那后面的关闭文件代码就得不到执行，所以很容易导致内存泄漏。

作为团队里的架构师来说，一般会希望把这段关闭的代码进行封装，从而不需要每个开发人员都去手动的调用关闭操作。 这次的这个新特性就满足了架构师的需求：

typescript 复制代码 
class TempFile implements Disposable {
    #path: string;
    #handle: number;

    constructor(path: string) {
        this.#path = path;
        this.#handle = fs.openSync(path, "w+");
    }

    [Symbol.dispose]() {
        // 关闭文件
        fs.closeSync(this.#handle);
		// 删除文件
        fs.unlinkSync(this.#path);
    }
}

可以看到文件的打开和关闭操作被封装到了一个类中，这个类实现了Disposable接口，这个接口有一个方法需要实现，那就是[Symbol.dispose]()。 Disposable和[Symbol.dispose]()就是这次的新特性之一。 上面的代码虽然对打开和关闭进行了封装，但是依然需要类的使用者去调用[Symbol.dispose]()方法，还是不完美。

using关键字 因此继续引入一个新的特性`using`关键字： ```typescript export function doSomeWork() { // 使用using时，file的作用域结束后，[Symbol.dispose]方法会被自动调用 using file = new TempFile(".some_temp_file");

kotlin 复制代码 
// 操作文件数据，有可能会提前return
if (someCondition()) {
    // do some more work...
    return;
}

}

csharp 复制代码 
可以看到`TempFile`的对象实例变量`file`前面用了一个关键字`using`，而不是`const`，它的功能和`const`类似，都是声明一个常量，但是它还表示，在`file`对象的作用域结束时，`file`对象的`[Symbol.dispose]()`方法会被自动调用。这就解决了架构师想解决的问题，架构师封装了`TempFile`类之后，其资源释放方法会被自动调用，不过前提是需要使用`using`关键字。

`using`关键字有如下几个特性：
1. 会在目标变量作用域（containing scope）结束时或者在`return`前，自动调用变量的成员方法`[Symbol.dispose]()`。这里要注意的是闭包的情况，后面会讲。
2. 当同一个作用域中多次使用`using`时，会从最后一个使用`using`的变量开始往前，挨个儿调用变量下的`[Symbol.dispose]`为名称方法，和栈的先进后出规则一致。

`using`的特性1，关于闭包的问题，需要详细说明一下：

```typescript
class TempFile implements Disposable {
    #path: string;
    #handle: number;

    constructor(path: string) {
        this.#path = path;
        this.#handle = fs.openSync(path, "w+");
    }

    [Symbol.dispose]() {
        // 关闭文件
        fs.closeSync(this.#handle);
		// 删除文件
        fs.unlinkSync(this.#path);
    }
}

function doSomeWork() {
	// 使用using，file的作用域结束后，[Symbol.dispose]()方法会被自动调用
    using file = new TempFile(".some_temp_file");

	return () => {return file};
}

const getFile = doSomeWork();
const outFile = getFile();

上面例子中doSomeWork中嵌套了箭头函数定义，形成闭包，file最终被返回到外层，只要getFile变量不被销毁，file变量就不会被销毁。但是这并不影响file下面的[Symbol.dispose]()方法被执行。doSomeWork函数在返回的那一刻，file的containing scope作用域已经结束了。containing scope包括函数块作用域和大括号块作用域。

using的特性2，举例如下：

typescript 复制代码 
// 函数也照样可以返回Disposable，后面会讲解
function loggy(id: string): Disposable {
    console.log(`Creating ${id}`);
	
    return {
        [Symbol.dispose]() {
            console.log(`Disposing ${id}`);
        }
    }
}

function func() {
    using a = loggy("a");
    using b = loggy("b");
    {
        using c = loggy("c");
        using d = loggy("d");
    }
    using e = loggy("e");
    return;

    // 这里不会被运行，因此也没有dispose
    using f = loggy("f");
}

func();
// Creating a
// Creating b
// Creating c
// Creating d
// Disposing d
// Disposing c
// Creating e
// Disposing e
// Disposing b
// Disposing a

这个例子主要是讲[Symbol.dispose]()的调用顺序问题。 可以看到Disposing d最先被调用，因为在众多using变量中c和d最先结束了作用域，大括号是块级作用域，c和d被dispose的顺序则是从后往前，最后声明的变量最先被dispose。 f由于在return之后，因此不会被运行。 因此d和c被dispose后，从最后的e开始dispose，依次往上。

函数返回Disposable类型变量给using

上面的例子中大部分都在说在类中定义[Symbol.dispose]()函数，类还需要继承于Disposable接口。 其实对于using来说，只要所作用的变量带有[Symbol.dispose]()方法属性，就可以了，而TypeScript是根据变量的属性内容来判断其类型的，因此这样一个对象，就可以认为是Disposable类型：

typescript 复制代码 
// Disposable类型的对象
{
	[Symbol.dispose]() {
		console.log(`Disposing ${id}`);
	}
}

Disposable接口的定义如下：

typescript 复制代码 
interface Disposable {
    [Symbol.dispose](): void;
}

因此我们也完全可以这么写：

typescript 复制代码 
function loggy(id: string): Disposable {
    console.log(`Creating ${id}`);

    return {
        [Symbol.dispose]() {
            console.log(`Disposing ${id}`);
        }
    }
}
function func() {
    using a = loggy("a");
}
func();

由于loggy()返回的对象有[Symbol.dispose]()方法属性，因此可以对该对象使用using来声明。而且该对象的类型就是Disposable。

异常处理

细心的朋友可能会好奇对于抛异常的情况，using还有用吗？答案是依然有用。 举例如下：

typescript 复制代码 
function throwy(id: string) {
    return {
        [Symbol.dispose]() {
            console.log('外界抛异常也不阻挡我被执行');
        }
    };
}

function func() {
    using a = throwy("a");
    throw new Error("oops!")
	// 最终 [Symbol.dispose]()依然会被执行
}
func();

可以看到func()在返回前抛异常了，这时依然不影响[Symbol.dispose]()被执行。事实上该异常会先被catch住，等[Symbol.dispose]()执行完，再被抛出来。

不过还有一种更复杂的情况，就是 [Symbol.dispose]()中也抛异常了：

typescript 复制代码 
class ErrorA extends Error {
    name = "ErrorA";
}
class ErrorB extends Error {
    name = "ErrorB";
}

function throwy(id: string) {
    return {
        [Symbol.dispose]() {
            throw new ErrorA(`Error from ${id}`);
        }
    };
}

function func() {
    using a = throwy("a");
    throw new ErrorB("oops!")
	// 最后依然会执行[Symbol.dispose]()方法
}

try {
    func();
}
catch (e: any) {
    console.log(e.name); // SuppressedError
    console.log(e.message); // An error was suppressed during disposal.

    console.log(e.error.name); // ErrorA
    console.log(e.error.message); // Error from a

    console.log(e.suppressed.name); // ErrorB
    console.log(e.suppressed.message); // oops!
}

这时可以看到有两处在抛异常，func()函数抛异常后[Symbol.dispose]()依然会执行，因此两个异常都会被抛出，但是只有一个catch，那catch(e: any)括号的e会是哪个呢？答案是，e是一个新的异常对象SuppressedError，该对象对那两个被抛出的异常对象进行了封装：

  1. e.error：代表[Symbol.dispose]()方法中的Error对象。
  2. e.suppressed：代表func()函数中的Error对象

suppressed是抑制的意思，可以理解为，其实func()函数中的异常先被抑制住了，然后最后和[Symbol.dispose]()中的异常放到同一个Error对象中被抛出。

说到这里，可能大家会好奇TypeScript是怎么做到在作用域结束前，不管是否有异常都能执行[Symbol.dispose]()的呢？其实翻看其编译后的代码，可以看到，其实是用try {} finally{}实现的：

typescript 复制代码 
try{

} finally {

}

finally可以确保不管是否有异常抛出，[Symbol.dispose]()都会得到执行。

如果关闭资源是异步的怎么办

所谓异步地关闭资源就是指dispose方法是异步的方法，这时首先我们应该将[Symbol.dispose]()换成async [Symbol.asyncDispose]()。 举例如下：

typescript 复制代码 
async function doWork() {
    // 模拟一个异步
    await new Promise(resolve => setTimeout(resolve, 500));
}

function loggy(id: string): AsyncDisposable {
    console.log(`Constructing ${id}`);
    return {
        async [Symbol.asyncDispose]() {
            console.log(`Disposing (async) ${id}`);
            await doWork();
        },
    }
}

这时如果我们要等待其关闭结束在继续往后执行的话，那我们应该怎么做呢？其实我估计大家已经想到了，对，就是这样await using，加一个await就可以了，不过这时using后面的变量类型就不是Disposable了，而是AsyncDisposable，其实很好理解，它的[Symbol.asyncDispose]()方法的返回值是Promise类型，自然就可以用await了。

AsyncDisposable也是一个接口（interface），其定义如下：

typescript 复制代码 
interface AsyncDisposable {
    [Symbol.asyncDispose](): PromiseLike<void>;
}

下面看看await using如何使用：

typescript 复制代码 
async function func() {
    await using a = loggy("a");
    await using b = loggy("b");
    {
        await using c = loggy("c");
        await using d = loggy("d");
    }
    await using e = loggy("e");
    return;

    // 这里不会被运行
    // 不会被创建，也不会被dispose
    await using f = loggy("f");
}

func();
// Constructing a
// Constructing b
// Constructing c
// Constructing d
// Disposing (async) d
// Disposing (async) c
// Constructing e
// Disposing (async) e
// Disposing (async) b
// Disposing (async) a

更简洁的使用方式

上面也提过，上面的用法特别适合架构师去封装它的代码。但是有时候可能不需要这么重量级的代码，有时候就希望轻便一点的一次性的代码，且没有重复利用的必要。 这时DisposableStack和AsyncDisposableStack就派上了用场。 举例如下：

typescript 复制代码 
function doSomeWork() {
    const path = ".some_temp_file";
    const file = fs.openSync(path, "w+");

    using cleanup = new DisposableStack();
    cleanup.defer(() => {
        fs.closeSync(file);
        fs.unlinkSync(path);
    });

    // 操作文件数据。。。

    if (someCondition()) {
		// 业务逻辑。。。
        return;
    }

    // 。。。
}

DisposableStack生成的对象就是一个Disposable的对象，因此可以用using。 这里的defer()方法接收的是一个callback函数，当cleanup被执行[Symbol.dispose]()方法时，该callback函数会被调用。 defer()方法和Go、Swift、Zig、Odin语言中关键字defer很类似。

另外DisposableStack还有其他一些方法，例如use adopt。他们可以往DisposableStack栈中压入需要被释放的资源。 举例如下：

typescript 复制代码 
using stack = new DisposableStack();
const reader1 = stack.adopt(createReader(), reader => reader.releaseLock());
const reader2 = stack.adopt(createReader(), reader => reader.releaseLock());
const reader3 = stack.adopt(createReader(), reader => reader.releaseLock());

有多个reader资源被压入栈中，这些资源最后被释放时，还是按照栈的规则，先进后出，因此最先被释放的是reader3，其次reader2，再次reader1。

AsyncDisposableStack和DisposableStack用法一致，只不过它的回调函数返回的是Promise，因此需要使用对应的await using。

Polyfill

最后，还是我们刚开始说的，这个特性本质上是Javascript的新特性，目前还处在Stage3阶段，各个浏览器、Node.js还没有实现这些特性，TypeScript只能是语法层面去实现这个特性，有些Native的变量TypeScript做不了，例如Symbol.dispose，Symbol类型是一个Native的特殊类型，JavaScript很难去模拟，TypeScript的核心任务是创造新的类型相关的语法，因此也不太适合去模拟。

目前需要对下面这些进行Polyfill： Symbol.dispose Symbol.asyncDispose DisposableStack AsyncDisposableStack SuppressedError

不过如果我们仅仅是简单的使用using或者await using，那我们仅仅需要在JavaScript中放入如下Polyfill：

javascript 复制代码 
Symbol.dispose ??= Symbol("Symbol.dispose");
Symbol.asyncDispose ??= Symbol("Symbol.asyncDispose");

需要注意的是最好是在JavaScript中放入该段代码，不是TypeScript，如果放到TypeScript中，它会提示你Symbol.dispose是只读属性，语法检查不过，如果实在想放TypeScript中，那需要给这两行代码分别加// @ts-ignore的注释，这样可以关闭单行的语法检查。另外最好加到所有代码的最前面。 如果运行环境版本较老，上面的??=也可以改成if else的形式。

另外，微软官方文档还说需要对tsconfig.json进行如下配置，es2022也可以被替换成更低版本：

javascript 复制代码 
{
    "compilerOptions": {
        "target": "es2022",
        "lib": ["es2022", "esnext.disposable", "dom"]
    }
}

就是这些了。

相关推荐
m0_7482552613 分钟前
easyExcel导出大数据量EXCEL文件，前端实现进度条或者遮罩层
前端·excel
web147862107231 小时前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 小时前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
ZJ_.1 小时前
WPSJS：让 WPS 办公与 JavaScript 完美联动
开发语言·前端·javascript·vscode·ecmascript·wps
GIS开发特训营1 小时前
Vue零基础教程|从前端框架到GIS开发系列课程（七）响应式系统介绍
前端·vue.js·前端框架·gis开发·webgis·三维gis
Cachel wood2 小时前
python round四舍五入和decimal库精确四舍五入
java·linux·前端·数据库·vue.js·python·前端框架
学代码的小前端2 小时前
0基础学前端-----CSS DAY9
前端·css
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10红米手机使用google play