This very short guide will walk you through setting up TypeScript with new (or existing!) Node.js projects.
- 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)
- 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
- 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
- Create a directory and go into your newly created folder
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).
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
- 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.
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?