How to Build a REST API With Express JS and Typescript
By: Divine Dela
Tags: Expressjs, JavaScript, Typescript

Photo by Azharul Islam on Unsplash

With NodeJs, we can leverage our Javascript skills to build server side applications. Express Js is a very popular server side framework for NodeJs.

Typescript is a “superset of javascript” which helps us to add types to our javascript code. By catching errors and providing fixes before we ran our code, typescript can help us save time and write more quality code. Any valid JavaScript code is valid Typescript code.

PREREQUISITES

You will need a basic understanding of REST API development using Express framework for Node JS.

Step 1: Create project folder

Create a new folder on your computer. Let’s call it express-typescript. Open the express-typescript folder with VS code or your favorite text editor.

Step 2: Initialize a new Node Js Project

Using the terminal, navigate to the new folder.

Alternatively, if you’re using VS Code with the project open, access the terminal by typing

CTRL + `

At the terminal, run the command:

npm init

Accept all defaults until you get to entry point, type dist/index.js as shown below.

After, your package.json file should look like the one shown below:

step 3: Install typescript as a dev dependency

Run the following command to install typescript as a develpoment dependency in your project.

npm i -D typescript

Step 4: Add dist folder and index.ts file

Let’s create a folder named dist and a file named index.ts at the root of the project.

Step 5: Add a tsconfig.json file

A tsconfig.json file is needed to run the project with typescript. This file…

Back to the terminal, run :

npx tsc --init

This will create a tsconfig file.

Step 6: Get the tsconfig.json file ready

Open the tsconfig.json file.

We’ll uncomment the file and make lines 17 and 18 as shown below. This tells typescript compiler to find the root typescript file in the root of the project ( shown by ‘./’ ) and put the transpiled javascript files in the dist folder ( also located in the root ).

Updating Lines 17 and 18 of tsconfig.json

Step 7: Start ts compiler

Let’s add a simple statement in the index.ts file and run the following command from the terminal:

npx tsc --watch

The first time, right after running the command, an index.js file is generated in the dist folder, as defined in the tsconfig.json file. Because we added the — watch flag to the command, any time we update the index.ts file, typescript compiler will update the index.js file in the dist folder.

Updated index.js file after running npx tsc — watch the first time

Step 8: install express and type declaration file for express

When using typescript, we install type declaration files. Type definition files have the file extension .d.ts. They aid our development by adding types to an npm package that has no types.

Install express and type declaration files for express by running the following 2 commands from the terminal:

npm i express npm i -D @types/express

step 9: Create an express app

Add the following code to the index.ts file. Take note of the import statement at line 1 as shown below.

Because typescript uses the ES Module System, we wouldn’t write our import statements as shown below but rather with the format of line 1 as shown in the screenshot above.

const express = require('express')

step 10: Update npm scripts in package.json file

Add a start script as shown on line 8 below. Optionally add a script (line 9) to instruct typescript compiler to watch the file for changes and update the index.js file in the dist folder. Then instruct nodemon to watch for changes to the index.js file.

To use the script on line 9, make sure you’ve installed nodemon. You can install Nodemon globally by running from the terminal:

npm i -g nodemon

Run the script on line 9:

npm run dev

After running the script, the index.js file will be updated to the code shown in the screenshot below.

You can now add more REST endpoints as you need. The completed code can be found in the repository here:

Happy coding!!