How to Set Up Express with TypeScript: A Step-by-Step Guide for Beginners

Watch the full YouTube tutorial: Click here to watch

Setting up Express with TypeScript might seem intimidating at first, but once you understand the structure and tooling, it becomes incredibly powerful and easy to maintain.

In this blog, we’ll walk through how to set up a minimal Express + TypeScript API from scratch—perfect for beginners. We’ll also reference a real-world example and folder structure from the YouTube video above.

Project Folder Structure

Here’s a snapshot of our project directory after setup:

expressts/
├── build/
├── node_modules/
├── package.json
├── package-lock.json
├── tsconfig.json
└── src/
├── controllers/
├── database/
├── routes/
├── server.ts
├── types/
│ └── student.interface.ts
└── util/

Step 1: Initialize the Project

In your terminal, run the following to create a new project folder:

mkdir expressts && cd expressts
npm init -y

Step 2: Install Required Dependencies
Install Express and TypeScript:

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

What These Do:

express: Web framework
typescript: Type system for JS
ts-node-dev: Auto-reload TypeScript files during development
@types/node: Node.js type definitions
@types/express: Express type definitions

Step 3: Configure TypeScript

Run:

npx tsc --init

Edit your tsconfig.json to match:

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

Step 4: Create Entry Point — src/server.ts

In this project, we’re creating a simple API that returns a list of students using TypeScript interfaces for type safety.

// src/server.ts

import express, { Application, Request, Response } from "express";
import { IStudent } from "./types/student.interface";

const app: Application = express();
const PORT = 3000;

// Dummy student data
const students: IStudent[] = [
  {
    name: "Dennis Peter",
    id: 1234,
    phoneNo: "0712345667",
  },
  {
    name: "Alex Leter",
    id: 12345,
    phoneNo: "0732345667",
  },
  {
    name: "Joan Kariuki",
    id: 123450,
    phoneNo: "0722345657",
  },
];

// Basic GET route
app.get("/", (req: Request, res: Response) => {
  res.status(200).json({ success: true, data: students });
});

// Start the server
app.listen(PORT, () => {
  console.log(`The server is running on PORT ${PORT}`);
});

Step 5: Create a Custom Interface

Inside the src/types folder, create a file named student.interface.ts:

// src/types/student.interface.ts

export interface IStudent {
  name: string;
  id: number;
  phoneNo: string;
}

This ensures strict typing across your app and makes it easy to scale and maintain.

🧪 Step 6: Add a Dev Script in package.json

Update your package.json with:

"scripts": {
  "start": "ts-node-dev src/server.ts"
}

Now, run the server:

npm run dev

Sample package.json

Here’s a reference version (may vary slightly depending on your setup):

{
  "name": "expressts",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "ts-node-dev src/server.ts"
  },
  "dependencies": {
    "express": "^4.18.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.14",
    "@types/node": "^18.11.9",
    "ts-node-dev": "^2.0.0",
    "typescript": "^4.8.4"
  }
}

Output Example

When visiting http://localhost:3000, you should see:

Watch Tutorial

Watch this entire process on YouTube

Final Thoughts

Congratulations! You’ve just built a working Express API using TypeScript. This setup is the foundation for building real-world, scalable backends with strict type-safety and modern tooling.

Next Steps: