Code for breakfast.

Speed up TypeScript development with tsnd

I've been writing a lot of my Node work in TypeScript lately, and ts-node-dev (also known as tsnd) has quickly become one of my go-to tools.

The value: tsnd compiles and runs your TyoeScript project, then watches the project's files for changes. If you modify a file, tsnd will re-typecheck and re-compile your code, then re-start the running process. This adds up to a lot of saved keystrokes! ⌨️

tsnd does it's best to stay out of your way, installing and running it is a breeze:

yarn add ts-node-dev --dev # or `npm i ts-node-dev --save-dev`

yarn tsnd src/main.ts

# that's it! 👏🏽

Things to know

The --files flag

By default, tsnd does not load the files specified in tsconfig,.json by default. Fortunately, it exposes a --files flag to toggle this behavior.

Debugging

If you want to add breakpoints and debugger statements, simply specify an --inspect flag before your entrypoint file. You can optionally provide a host:port string if you're attaching

tsnd --files --inspect=localhost:9229 src/main.ts

For all Here are my corresponding package.json/launch configs:

.vscode/launch.json

"configurations": [
  {
    "type": "node",
    "request": "launch",
    "name": "Launch debug",
    "runtimeExecutable": "yarn",
    "runtimeArgs": ["run", "devdebug"],
    "port": 9229
  }
]

package.json

"scripts": {
  "devdebug": "tsnd --files --inspect=localhost:9229 src/main.ts",
},