Setting Up Express.js with TypeScript: A Developer’s Guide

Express.js and TypeScript make a powerful combination for building robust web applications. In this guide, we’ll walk through setting up an Express.js project with TypeScript support from scratch. Let’s dive in!

Prerequisites

Before we begin, make sure you have:

• Node.js installed (version 12 or higher)
• npm or yarn package manager
• Your favorite code editor

Initial Project Setup

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

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

Installing Dependencies

Install the necessary dependencies:

npm install express
npm install -D typescript @types/express @types/node ts-node nodemon

TypeScript Configuration

Create a tsconfig.json file in your project root:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"]
}

Project Structure

Create a basic project structure:

mkdir src
touch src/app.ts

Writing Your First TypeScript Express App

In src/app.ts, add this basic Express server setup:

import express, { Express, Request, Response } from 'express';

const app: Express = express();
const port = process.env.PORT || 3000;

app.get('/', (req: Request, res: Response) => {
  res.json({ message: 'Express + TypeScript Server' });
});

app.listen(port, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

Setting Up Development Scripts

Update your package.json with these scripts:

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

Running the Application

Start your development server:

npm run dev

Your Express.js application with TypeScript is now up and running! You can access it at http://localhost:3000.