TypeScript Project Setup 2024 Link to heading

JS is a mess. Here are a couple notes from setting up Node.js TypeScript projects in 2024.

Tooling Link to heading

  • tsup for bundling.
    • Nice developer experience, powered by the great esbuild.
    • Regular tsc has some quirks and gotchas. Best to avoid it if possible I think.
    • For decorator metadata support, install @swc/core.
    • For interfaces, esbuild requires a type import: import type { Interface } from "."
  • tsx for live reloading - it just works ®
  • eslint for linting
    • pnpm eslint --init
    • Code style guides like airbnb, google, and xo are way too strict, and often conflict with prettier, best to just select a few rules manually unless you have good reason to enforce strict styles.

Path Aliases Link to heading

Path aliases are great for importing ES modules as absolute paths, so the dependency graph is not bound to the dir structure of the project.

Bizarrely, tsc does not convert aliases at build time, so the transpiled JS is useless if you have custom aliases (I don’t get this at all). Using a tool like tsup or esbuild is enough to mitigate this.

Sensible tsconfig.json example using path imports:

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"]
}