While building a server project written in JavaScript and using Node.js + Express is simple. But when your project is developed every day and need to increase the number of developers from other countries, Instead of using JavaScript we will use TypeScript to code and handle errors more efficiently and quickly.

In this article, I introduce to you how to initialize an Express + TypeScript project.

Create package.json

mkdir node-express-typescript
cd node-express-typescript
yarn init --yes

The default config will be created

{
    "name": "node-express-typescript",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "type": "module",
    "keywords": [],
    "author": "",
    "license": "ISC"
}

Create a server with Express

yarn add express dotenv

Create file ./node-express-typescript/src/index.js

const express = require('express');
const dotenv = require('dotenv');

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

app.use(express.json());
app.use(express.static('public'));
app.set('view engine', 'ejs');

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

app.listen(port, () => {
  return console.log(`http://localhost:${port}`);
});

Set port in .env file

PORT=3000

To start the server, we run the command below

node src/index.js

Express server is already running, you can try using postman to check.

Setup TypeScript, Install dev dependencies

yarn add typescript @types/express @types/node --dev

In package.json will be like below

{
    "devDependencies": {
        "@types/express": "^4.17.14",
        "@types/node": "^18.11.11",
        "typescript": "^4.9.3"
    }
}

Create tsconfig.json

npx tsc --init

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": "./",
    "rootDir": "./",
    "outDir": "./dist",
    "paths": {}
  },
  "include": ["./src"],
  "exclude": ["node_modules"]
}

Change the file ./node-express-typescript/src/index.js to ./node-express-typescript/src/index.ts

import express from 'express';

const app = express();
const port = 3000;
app.use(express.json());
app.use(express.static('public'));
app.set('view engine', 'ejs');

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

app.listen(port, () => {
  return console.log(`http://localhost:${port}`);
});

Setup auto reload

yarn add nodemon ts-node --dev

Create nodemon.json

{
  "watch": ["src"],
  "ext": "ts",
  "exec": "ts-node ./src/index.ts"
}

Update script in package.json

{
    scripts": {
        "build": "npx tsc",
        "start": "node dist/index.js",
        "dev": "nodemon"
    }
}

Start server

yarn dev

Now that the server is working, you can change the content of the file index.ts res.send('Hello World!'); to res.send('Hello World Update!'); and then trigger postman again and see the change as shown below

Setup ESLint, Install dev dependencies

yarn add eslint eslint-config-prettier eslint-config-standard-with-typescript prettier @trivago/prettier-plugin-sort-imports @typescript-eslint/eslint-plugin --dev

npx eslint --init

Change the content of the file .eslintrc.json

{
  "env": {
    "node": true,
    "commonjs": true
  },
  "root": true,
    "extends": ["standard-with-typescript", "eslint:recommended", "plugin:prettier/recommended"],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "parser": "@typescript-eslint/parser",
    "project": "./tsconfig.json"
  },
  "plugins": ["react"],
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "off"
  }
}

Create .prettierrc

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
  ],
  "importOrderSeparation": true, 
  "importOrderSortSpecifiers": true,
  "plugins": []
}

Update script in package.json

"scripts": {
    "build": "npx tsc",
    "start": "node dist/index.js",
    "dev": "nodemon",
    "lint": "eslint .",
    "lint:fix": "eslint --fix",
    "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
  },

Run format code

yarn format

Good luck with your installation!!!