Muhammad Putra Age's Blog

This guide walks you through setting up an Express.js project with TypeScript from scratch.

Prerequisites

Make sure you have the following installed:

Node.js (>= 14)
npm or yarn

1. Initialize the Project

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

2. Install Dependencies

Install Express and TypeScript along with type definitions:

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

3. Configure TypeScript

Create a tsconfig.json file:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true
  }
}

4. Create the Project Structure

mkdir src
touch src/index.ts

In src/index.ts, add:

import express from "express";

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

app.get("/", (_req, res) => {
  res.send("Hello from TypeScript + Express!");
});

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

5. Add Dev Scripts

Update package.json:

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

6. Run the Project

Start the server in development mode:

npm run dev

You should see:

Server is running on http://localhost:3000

7. Build for Production

npm run build
npm start

Optional: Linting and Formatting

For a more polished dev setup, you can add ESLint and Prettier:

npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

Then configure .eslintrc.json and .prettierrc as needed.

You're All Set!

You now have a working Express.js app powered by TypeScript 🚀

Setting Up an Express Project with TypeScript