DEV Community

Cover image for Setting up Express with Typescript, Prettier and Eslint in post-2026
Femi Abimbola
Femi Abimbola

Posted on

Setting up Express with Typescript, Prettier and Eslint in post-2026

Hi

So you want to setup express with Typescript in the right way in post 2026 right? Let me show you how!

Before setting up, ensure you have Node.js installed. Version 20+ or later is highly recommended.

To check if you have Node.js installed. Type the command in your terminal

node --version
Enter fullscreen mode Exit fullscreen mode

You should see something similar to this

v22.20.0
Enter fullscreen mode Exit fullscreen mode

Step 1: Initialize the Project

Let's create the project directory and initialize the project

mkdir express-typescript-project   //This create the project directory
cd express-typescript-project      // This enter the project directory
npm init -y  //This create package.json with the default setting
Enter fullscreen mode Exit fullscreen mode

Step 2: Install Express dependencies

Install express and its corresponding dev dependencies

npm install express    //This install express as dependencies
npm install -D typescript @types/node @types/express
Enter fullscreen mode Exit fullscreen mode

Step 3: Install typescript run time

tsx is significantly faster, requires zero configuration for ESM

npm install --save-dev tsx
Enter fullscreen mode Exit fullscreen mode

Step 4: Configure TypeScript

Generate a tsconfig.json file to configure the TypeScript compiler

npx tsc --init
Enter fullscreen mode Exit fullscreen mode

Open tsconfig.json and replace it with this

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true, 
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true, // Helpful for debugging
    "resolveJsonModule": true, // Let's you import .json files
    "noImplicitReturns": true, // Forces better logic flow
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}
Enter fullscreen mode Exit fullscreen mode

Step 5: Create the index File

Create a src directory and add an index.ts file inside it:

mkdir src // This create the source folder
touch src/index.ts  //Create the index.ts
Enter fullscreen mode Exit fullscreen mode

In the index.ts file, write the following code

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

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

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

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});
Enter fullscreen mode Exit fullscreen mode

Step 6: Update the Scripts in your package.json file is updated

  "scripts": {
    "dev": "tsx watch src/index.ts",
    "build": "tsc",
    "start": "node dist/server.js",
    "start:prod": "npm run build && npm run start",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write \"**/*.{ts,js,json,md,yml,yaml}\""
  },
Enter fullscreen mode Exit fullscreen mode

Ensure your package.json has the type module

 "type": "module",
Enter fullscreen mode Exit fullscreen mode
  • build: Compiles TypeScript to JavaScript in the dist folder.
  • start: Runs the compiled JavaScript.
  • dev: Runs in development mode with auto-reloading.
  • lint:fix Fixes the linting issues

Step 7: Run the Application

For development: npm run dev
For production: First build with npm run build, then npm start

Visit http://localhost:8000 in your browser to see the "Hello, TypeScript + Express!" message.

Top comments (1)

Collapse
 
sleewoo profile image
Slee Woo

Great start!
Next step is adding some automation like here - kosmojs.dev/start.html

KosmoJS taking care about every aspect - type safety, runtime validation based on your types, fetch clients etc.
You only add routes by creating files.