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 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 guide will also show you how to make use of popular packages like nodemon to support hot-reloading of your applications

Why TypeScript?

  • 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:

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

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

  • 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?

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store