Using Express with TypeScript

TypeScript has been gaining popularity and adoption for a while as a strongly-typed flavor of JavaScript. And Express has been a fan-favorite for writing JavaScript backends. So how do we use them together? Let's explore.

Let's start by creating a Node.js application. Create a directory express-with-typescript and open a terminal there. Execute the following command on the terminal.

yarn init -y

This will generate a package.json file. Open the directory in your favorite editor.

Create an Express app

Install express as a dependency.

yarn add express

Create a file src/server.js and add the following code.

 1// src/server.js
 2
 3const express = require('express')
 4
 5const app = express()
 6const port = 8080 // server port
 7
 8// default route
 9app.get('/', (req, res) => res.json({
10  message: 'Hello World!'
11}))
12
13// server
14app.listen(port, () => console.log(`Server started at http://localhost:${port}`))

In the package.json, add a main entry pointing to this file and create a script to launch the application.

1"main": "src/server.js",
2"scripts": {
3  "start": "node ."
4},

Open the terminal and execute yarn start to launch the application. You should see the following message on the terminal.

Server started at http://localhost:8080

Send a request to the default endpoint using curl and you should get a reply.

1$ curl http://localhost:8080/
2{"message":"Hello World!"}

Let's add TypeScript support now.

Add TypeScript support

Execute the following command to add TypeScript in your devDependencies.

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

@types dependencies provide type information to the editors so they can assist with code completion and type-checking.

There's some configuration needed for the TypeScript compiler tsc to inform it where the TypeScript source code is located and where the compiled JavaScript code should be written at. To do so, execute the following command to generate a tsconfig.json file.

npx tsc --init

Open the tsconfig.json file and add the following configuration.

 1{
 2  "compilerOptions": {
 3    "incremental": true,
 4    "target": "es6",
 5    "module": "commonjs",
 6    "sourceMap": true,
 7    "outDir": "dist",
 8    "strict": true,
 9    "moduleResolution": "node",
10    "baseUrl": ".",
11    "paths": {
12      "*": [
13        "node_modules/*"
14      ]
15    },
16    "esModuleInterop": true
17  },
18  "include": [
19    "src/**/*"
20  ]
21}

Note that the the output of the compiler is pointed to a directory named dist. Open package.json and add the following configuration.

1"main": "dist/server.js",
2"scripts": {
3  "build": "tsc",
4  "prestart": "npm run build",
5  "start": "node ."
6},

When start script will be used, prestart will fire first, launching tsc to compile the TypeScript code and put it in the the dist directory.

Rename src/server.js to src/server.ts and add the following code.

 1import express from 'express';
 2
 3const app = express();
 4const port = 8080; // server port
 5
 6// default route
 7app.get('/', (req, res) => res.json({
 8  message: 'Hello World!'
 9}));
10
11// server
12app.listen(port, () => console.log(`Server started at http://localhost:${port}`));

Launch the application by executing yarn start and you'll get the same application up and running, now with TypeScript support.

References

Source code — express-with-typescript