Setting up Express + Typescript

Setting up Express + Typescript

Express and TypeScript is a powerful combination. This is a no-fuss guide to get you started with them.

First, we need to create a folder that will host our application and initialize it using the following commands

\# Create and visit a folder
mkdir express-backend && cd "$\_"
\# Init the project with defaults
npm init --yes

This will create a package.json with the following contents

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

Next we need to install express with the command

npm install \--save express

Now we can create a server that responds to requests

// server.js
const express = require("express");

const app = express();
app.get("/", (req, res) => {
  res.send("Hello world!");
});
const port = 3000;
app.listen(port, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

If we run this file with the command node server.js and visit localhost:3000 we will be greeted with the following message

Not that impressive but at least it works! Let’s add typescript before starting to write some code.

npm i -D typescript @types/express @types/node

This will install the typescript dependencies but we still need a configuration file. We can create one with the command npx tsc — init or you can copy/paste the following to make sure we are on the same page.

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2018",
    "moduleResolution": "node",
    "allowJs": true,
    "checkJs": true,
    "outDir": "dist", // Compiled Output Directory
    "rootDir": "",
    "esModuleInterop": true,
    "resolveJsonModule": true
  },
  "include": [
    "src/\*\*/\*.js", // Every js file inside src folder
    "src/\*\*/\*.ts", // Every ts file inside src folder
    "server.ts"
  ],
  "exclude": [
    "node\_modules",
    "dist" // Exclude compiled output by Typescript compiler
  ]
}

[tsconfig reference](https://www.typescriptlang.org/tsconfig)

We can now rename our entry point to server.ts

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

const app: Express = express();
app.get('/', (\_: Request, res: Response) => {
    res.send('Express + TypeScript Server');
});
const port = 3000;
app.listen(port, () => {
  console.log(`⚡️[server]: Server is running at http://localhost:${port}`);
});

Notice that we can now import and use express types.

In order to run this file we first need to convert it to Javascript. We can do this with the command

tsc

This will transpile our code to Javascript inside the dist folder. We can run it with

node dist/server.js

The result will be the same as before but we can now write our code using typescript.

Nodemon

Transpiling the code after every change can be time-consuming. We can improve the Development Experience with [nodemon](https://nodemon.io/). An industry standard tool to restart the server after every change.

npm install \--save-dev nodemon

Now update our package.json with the following tasks

...
 "main": "server.ts",
 "scripts": {
    "dev": "nodemon server",
    "build": "tsc",
    "start": "NODE\_ENV=production ts-node server"
  },
...

We created the following commands:

• npm run dev : runs the application with hot reload
• npm run build : transpiles the code inside the dist folder
• npm run start : serves the server.ts file directly on production mode

The repository is available on GitHub.

Next steps: Read about recommended Express Application Architecture and Folder Structure