Add support for TypeScript to a project via esbuild

Follow these steps to add support for TypeScript to any project, best suitable for simple prototypes that don't need a complex build. It's assumed that JavaScript files are in js folder in root of project and TypeScript files are in ts folder.

  • Add following to package.json:
{
  "type": "module",
  "scripts": {
    "start": "npm run build -- --watch=forever & http-server",
    "build": "esbuild ts/*.ts --outdir=js"
  },
  "devDependencies": {
    "esbuild": "^0.19.12",
    "http-server": "^14.1.1"
  }
}
  • Add a tsconfig.json with following content:
{
    "compilerOptions": {
        "strict": true,
        "target": "es6",
        "lib": [
            "es2019",
            "dom",
            "dom.iterable"
        ]
    },
    "exclude": [
        "node_modules"
    ]
}
  • Add your js folder to .gitignore.

Now you can run npm start to start your project and esbuild will watch and compoile .ts files to .js for you.