How to Build a REST API With Express JS and Typescript
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 initAccept 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 --initThis 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 ).
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.
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 expressnpm 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 nodemonRun the script on line 9:
npm run devAfter 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:
https://github.com/divinedela/express-typescript-apisHappy coding!!
