Complete Guide to Setting Up Node js Express Project with TypeScript

In this blog post, I’ll guide you through setting up a simple Node.js Express project using TypeScript. TypeScript adds type safety and modern JavaScript features to your Node.js applications, making your code more robust and maintainable.

Here’s the structure of the project:

 express-typescript-project/
├── src/
│   └── index.ts
├── dist/
├── node_modules/
├── package.json
├── package-lock.json
├── tsconfig.json
└── nodemon.json 

First, create a new directory for your project and navigate into it:

 mkdir express-typescript-project
cd express-typescript-project
npm init -y 

This creates a new directory, moves into it, and initializes a new Node.js project with default settings.

Install Express and other necessary packages:

 npm install express
npm install --save-dev typescript @types/express @types/node ts-node nodemon 

Here’s what each package does:

• express : The Express web framework
• typescript : The TypeScript compiler
• @types/express and @types/node : Type definitions for Express and Node.js
• ts-node : Allows running TypeScript files directly
• nodemon : Automatically restarts the server when files change

Create a tsconfig.json file in your project root:

 {
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
  }
} 

This configuration tells TypeScript how to compile your code.

Create a nodemon.json file in your project root:

 {
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node src/index.ts"
} 

This configuration tells Nodemon to watch the src directory for changes in TypeScript files and restart the server using ts-node.

Update the “scripts” section in your package.json :

 "scripts": {
  "start": "node dist/index.js",
  "dev": "nodemon src/index.ts",
  "build": "tsc"
} 

These scripts allow you to:

npm run dev : Start the development server with hot reloading npm run build : Compile TypeScript to JavaScript npm start : Run the compiled JavaScript in production

To ignore unnecessary files, create a .gitignore file:

 node_modules
dist 

Create a file at src/index.ts :

 import express, { Express, Request, Response } from "express";
 
const app: Express = express();
const port = 3000;
 
app.get("/", (req: Request, res: Response) => {
  res.send("Hello, TypeScript Express!");
});
 
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
}); 

This sets up a basic Express server with TypeScript types.

• For development: npm run dev
• This will start Nodemon, which will watch for changes and automatically restart your server.
• For production: npm run build followed by npm start
• This compiles your TypeScript code and then runs the compiled JavaScript.

<p>For a complete starter template, you can check out my 📁 <a href="https://github.com/mhdZhHan/express-typescript-starter" target="_blank" rel="noopener noreferrer" data-astro-prefetch="tap" class="text-fluid-base group inline-flex items-center rounded transition-all gap-1"> <code class="text-fluid-base tracking-tight [counter-reset:code] not-data-language:inline-flex not-data-language:px-1 not-data-language:decoration-clone not-data-language:leading-tight"> express-typescript-starter </code> <svg width="1em" height="1em" aria-hidden="true" class="size-4 shrink-0" data-icon="lucide:arrow-up-right"> <symbol id="ai:lucide:arrow-up-right" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h10v10M7 17L17 7"/></symbol><use href="#ai:lucide:arrow-up-right"></use> </svg> </a> repository on GitHub. It includes the basic setup and structure for building a scalable and maintainable Node.js application with Express, TypeScript, and MongoDB.</p>

You now have a solid foundation for building Express applications with TypeScript. This setup provides type safety, improved developer experience, and better code organization. The addition of Nodemon ensures a smooth development process with automatic restarting on file changes.

Happy coding! 🚀