How to Set Up an Express Project with TypeScript, Step-by-Step Guide

Introduction

Setting up an Express project with TypeScript can enhance your development experience by providing type safety and better tooling. In this guide, we’ll walk through the steps to create a simple Express application using TypeScript.

Prerequisites

Before we begin, ensure you have the following installed on your machine:

• Node.js: You can download it from nodejs.org.
• npm (Node Package Manager) comes with Node.js.

Step 1: Initialize Your Project

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

mkdir my-express-ts-app
cd my-express-ts-app

Now, initialize a new Node.js project:

npm init -y

This command will create a package.json file in your project directory.

Step 2: Install Dependencies

Next, install Express and TypeScript along with the necessary types:

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

• express: The web framework.
• typescript: The TypeScript compiler.
• @types/node: Type definitions for Node.js.
• @types/express: Type definitions for Express.
• ts-node: A TypeScript execution engine for Node.js.

Step 3: Create TypeScript Configuration File

Create a TypeScript configuration file named tsconfig.json:

npx tsc --init

Modify the tsconfig.json file to include the following options:

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

Step 4: Create Project Structure

Create the following directory structure:

my-express-ts-app
├── src
│   └── index.ts
├── package.json
└── tsconfig.json

Step 5: Set Up Your Express Server

In the src/index.ts file, add the following code:

import express from 'express';

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

app.get('/', (req, res) => {
  res.send('Hello, TypeScript with Express!');
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

Step 6: Update Scripts in package.json

Modify your package.json to include the following scripts:

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

• build: Compiles TypeScript files into JavaScript.
• start: Runs the compiled JavaScript.
• dev: Runs the TypeScript files directly.

Step 7: Run Your Application

To run your application in development mode, use the following command:

npm run dev

You should see the output indicating that the server is running. Open your browser and navigate to http://localhost:3000 to see the message "Hello, TypeScript with Express!"

Step 8: Build and Run in Production

To build your project for production, run:

npm run build

Then, start the application:

npm start

Congratulations! You've successfully set up an Express project with TypeScript. This setup will give you a robust foundation for building scalable applications with type safety. You can now start developing your APIs and services with confidence.

---