Setting up Typescript + Node.js

These are some quick notes on creating a new Typescript Node.js project that uses live development reloading with ts-node-dev and testing with Jest.

Setup Typescript

# Setup yarn package w/ default options
npm init -y

# Add typescript deps
npm install typescript ts-node-dev @types/node --save-dev

tsconfig.json

Add a tsconfig.json to configure the Typescript compiler. You can use npx tsc --init to create a file with a list of all options. A simplified version that compiles all code in /src and outputs it to /build:

{
  "compilerOptions": {
    "esModuleInterop": false,
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "outDir": "build",
    "strict": true,
    "target": "es6"
  },
  "include": ["src/**/*"]
}

package.json scripts

Add a scripts section to package.json for development and building. Replace index.ts with the entry point:

"scripts": {
  "dev": "ts-node-dev --respawn  ./src/index.ts",
  "prod": "tsc --build && node ./build/index.js",
  "build": "tsc"
}

You can now start development mode using:

npm run dev

Setup Jest for testing

# Install deps
npm install jest @types/jest ts-jest --save-dev

# Create a defualt config file
npx ts-jest config:init

# Or with npm:
yarn ts-jest config:init

Add new scripts to package.json to run tests in watch mode or in debug mode.

"scripts": {
    "test" : "jest --watchAll",
    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand"
}

Create a sample test in src/. By default jest will look for files ending in .spec.ts or .test.ts, though this can be customized.

An example test:

import {doSomething} from './index';

test('sample', () => {
  expect(doSomething()).toEqual(42);
});

Debugging with Chrome

To run tests with a debugger, add debugger to your test case you wish to debug. Run yarn test:debug. Open about:inspect in Chrome and select Open dedicated DevTools for Node. The dev tools instance should connect. Note: this can be flaky with WSL2. You might need to run wsl --shutdown in Powershell in order to allow node to run the debugger on the proper port. See bug.

Debugging with VSCode

Create a launch.json file in a .vscode\ subfolder of your projects roots. You’ll now be able to launch a debugger directly in VSCode via Run > Start Debugging.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": ["--inspect-brk", "${workspaceRoot}/node_modules/.bin/jest", "--runInBand"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229
    }
  ]
}

Setup prettier

I use the Prettier VSCode extension for code formatting. Generally I don’t like to think about formatting and have the VSCode set to auto-format on save:

// Inside vscode settings
"editor.formatOnSave": true,

To avoid auto-formatting causing problems when I’m working outside of my projects, I also require a .prettierrc file to be present in the project for formatting to work.

"prettier.requireConfig": true

An example .prettierrc file:

{
  "arrowParens": "avoid",
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "bracketSpacing": false
}