TypeScript – Using Disposable

前言

TypeScript v5.2 多了一个新功能叫 Disposable。

Dispose 的作用是让 "对象" 离开 "作用域" 后做出一些 "释放资源" 的操作。

很多地方都可以看到 Dispose 概念。比如 Web Component 的 disconnectedCallback，Angular 组件的 ngOnDestroy。

而对象释放资源在其它面向对象语言中也很常见，比如 C# 的 Dispose Pattern。

所以这一次 TypeScript 只是推出了一个本来就该有的功能而已。

之所以这么迟才推出，是因为这个功能可以用其它方式替代（虽然不够优雅），而且 Dispose 在后端比较需要，前端现在都迷函数式，对象反而越来越少见了。

目前的支持度

Disposable 并不是 TypeSCript 语法，而且 JavaScript ECMA 标准。目前在 stage 3。

当然 TypeScript 会做 down-level 处理，target ES2017 也可以使用，只是需要添加两句 runtime polyfill 就可以了。

在我写着一篇时，Prettier、ESLint、esbuild 都还不支持 Disposable。要测试只能用 TypeScript Compiler (AKA tsc)。

没有 Disposable 怎么释放资源？

首先有个对象

class Person {
  private intervalNumber: number;
  constructor() {
    this.intervalNumber = setInterval(() => console.log('call'), 1000);
  }
  dispose() {
    clearInterval(this.intervalNumber);
  }
}

对象用到了一个全局资源  setInterval，并曝露了一个接口释放该资源。

使用的情况下是这样的。

document.addEventListener('click', () => {
  const person = new Person();
  // do something...
  person.dispose();
});

这样写不够安全，因为如果 do something 不小心报错，就会导致 dispose 没有被执行。于是

document.addEventListener('click', () => {
  const person = new Person();
  try {
    // do something...
  } catch {
    console.log('error');
  } finally {
    person.dispose();
  }
});

繁琐了很多，但是还可以接受，毕竟需要错误处理嘛。但是...如果我们不需要错误处理呢？

document.addEventListener('click', () => {
  const person = new Person();
  // do something...
  if (Math.random() > 0.5) return;
  person.dispose();
});

即便没有错误，只是 return 也会导致 dispose 没有执行。这个时候硬硬加 try finally 就有点过分了。

所以我们需要 Disposable 来优化，让代码变得优雅。

有 Disposable 怎样释放资源？