Tutorial: How to use the new "using" keyword

[hazae41]

You can find a full example here: https://codesandbox.io/p/sandbox/suspicious-worker-gmm84r

1. Install latest typescript, tslib, ts-loader, and @hazae41/symbol-dispose-polyfill

npm i typescript tslib ts-loader @hazae41/symbol-dispose-polyfill

2. In tsconfig.json, set target to before ESNext (e.g. ES2022), and set noEmit to false

{
  "compilerOptions": {
    "target": "ES2022",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": false,
    "incremental": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

3. In next.config.js, add ts-loader to webpack

/** @type {import("next").NextConfig} */
module.exports = {
  reactStrictMode: true,
  webpack(config, context) {
    /**
     * Add this
     */
    config.module.rules.push({
      test: /\.tsx?$/,
      use: "ts-loader",
      exclude: /node_modules/,
    });
    return config;
  },
};

4. In _app.tsx / _app.jsx, add the following line at the top then two line breaks

import "@hazae41/symbol-dispose-polyfill"

If you use app directory, you have to put it in a way it's included in both server and client pages:

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-context-providers

5. Start using using

class Resource {
  [Symbol.dispose]() {
    alert("disposed")
  }
}

export default function Home() {
  useEffect(() => {
    using resource = new Resource();
  }, []);

  return null;
}