🎮 using / explicit resource management

Three resources — a Lock, a DB Connection, and a File Handle — need to be released in reverse order, even when the work between them throws. Pick a cleanup style, then run the happy path or the throwing path and watch what actually gets disposed.

Simulated, not native. using is TC39 Stage 3 — it shipped in TypeScript 5.2 and runs natively in recent Chrome, Firefox, Safari and Node, but it is not yet Baseline across all browsers. This demo scripts the disposal order the spec defines, so it behaves correctly no matter what's rendering this page.

1 Controls

Cleanup style

2 The code being simulated

function process() {
  using lock = acquireLock();
  using db   = openConnection();
  using file = openFile();

  doWork(); // may throw
}
// scope exits — normally OR via throw — and
// file, then db, then lock dispose automatically, in reverse order.

function process() {
  const lock = acquireLock();
  const db   = openConnection();
  const file = openFile();

  try {
    doWork();        // may throw
    file.dispose();  // only reached if doWork() succeeds
    db.dispose();    // only reached if doWork() succeeds
  } finally {
    // lock.dispose();  <- forgotten entirely
  }
}

Acquisition order: Lock → DB Connection → File Handle. Correct disposal always reverses that: File Handle → DB Connection → Lock.

3 Resources & log

🔒Lock idle

🗄️DB Connection idle

📄File Handle idle

Click a run button to start…

Ready — pick a cleanup style, then run a path.

Every resource opens in the same order either way. Watch which ones a thrown error skips, and which one manual code simply never remembers to close.