How to setup a TypeScript + Node.js project

This very short guide will walk you through setting up TypeScript with new (or existing!) Node.js projects.

Prerequisites:

• You should be somewhat familiar with Node and JavaScript
• You should have a code editor installed (preferably VSCode)
• This guide assumes that you’re on Linux, MacOS or another UNIX-like operating system.
• This guide also assumes you’re using npm as your package manager (feel free to use yarn, pnpm or your preferred package manager instead)

Goals:

• This will show you how to very quickly get started with TypeScript
• This guide will also show you how to make use of popular packages like nodemon to support hot-reloading of your applications

Why TypeScript?

• TypeScript is a superset of JavaScript which provides us with optional static typing. It was built by Microsoft and is arguably the only good thing they’ve released in a since VS Code (just kidding 😉)
• It serves as documentation and reduces onboarding overhead and thus improves developer experience
• Allows us to identify bugs/problems quickly thus increasing overall software quality
• Read the TypeScript handbook for more details

Setup:

1. Create a directory and go into your newly created folder

mkdir typescript-example
cd typescript-example

2. Initialise your package.json. The -y flag will apply all the defaults.

npm init -y

The package. json file is the core fundamental for every Node project. It contains all the metadata about your project which is required before publishing to NPM, and also defines functional attributes of a project that npm uses to install dependencies, run scripts, and identify the entry point to our package. Works similar to how the POM (project object model) works in Java, and requirements.txt works in Python.

3. Add TypeScript as a dev dependency to your project.

npm install typescript --save-dev

4. Install ambient Node.js types for TypeScript.

npm install @types/node --save-dev

TypeScript has Implicit, Explicit, and Ambient types. Ambient refers to the declarations used to inform a compiler that the actual piece of code exists in a different place. Since we’re using Node.js, it would be good if we could get type safety on Node apis like file, path process.

5. Create your tsconfig.json

npx tsc --init

This is where we define our TypeScript compiler options

6. Compile your code using the tsc command using Node package executer (npx).

npx tsc

Running the above should create produce the output and send it to wherever our outDir is in our tsconfig.json

Improving your local developer experience

1. Hot reloading — this will heavily improve your dev ex, as it’ll allow your application to hot reload on live changes. We can set this up via Nodemon in our Node.js apps.

npm install --save-dev ts-node nodemon

We will also need ts-node for running our typescript code directly without having to compile it. Nodemon will hot reload our code by watching for changes and auto restarting when file changes.

Conclusion

The above should be enough to quickly set up a TypeScript + Node project locally. You can enhance this further by:

• Use a linter: use something like ESLint. This is a static code analysis tool that allows us to set a standard across our code. We can use this to enforce coding standards and patterns for our codebase.
• Introduce deep deletion tools: Rimraf to remove unwanted files before pushing to production
• Add a static module bundler: use webpack (or turbopack). This will probably be overkill for a small project — but as your application scales you will need to mechanism to manage all your JS/TS.
• Automation — how can you automate the above for your business?