Express.js and TypeScript: A 2024 Guide to Implement REST-APIs

As someone with a background in Python, data science, and machine learning, I was initially disinterested in software development due to its crowded nature and emphasis on styling and designing. However, given the difficulty of breaking into data science as a fresher in India, I decided to explore web development as a stepping stone.

Starting with JavaScript and HTML, I eventually found my passion in back-end development. Using my Python expertise as a foundation, I learned TypeScript and the ExpressJS framework, which allowed me to build robust systems, handle data efficiently, and create powerful APIs.

In this short tutorial, I want to share with you my experience and learning process on how to develop REST APIs using TypeScript and ExpressJS. Together, we’ll explore the fundamentals of back-end development, including routing, middleware, and integrating database systems, so that you can build scalable APIs for your web applications.

Whether you’re a data science enthusiast looking to break into back-end development or a developer wanting to expand your skill set, this tutorial will give you the knowledge and confidence to embark on your journey. Let’s dive in and discover the possibilities of back-end development!

📂 Tasks Manager REST API

In this project, we delve into the world of REST APIs using TypeScript and Express to create a Task Manager. We’ll explore the fundamental CRUD operations (Create, Read, Update, and Delete) to perform tasks efficiently.

Enter the below commands one by one on your terminal to set up our project.
Ensure you have node, vscode, and git installed on your machine.

>> cd projects
>> mkdir taskManagerTS && cd taskManagerTS
>> npm init -y 
>> git init
>> touch .gitignore
>> echo "/node_modules" >> .gitignore
>> npm i -D express typescript ts-node nodemon @types/node @types/express
>> npx tsc --init
>> code .

🎫 Folder Structure

• Create a folder called src inside our project folder i.e taskManagerTS and inside this src folder create a file called index.ts
• create these folders. controllers, routes, models, interfaces inside src folder
• Your folder structure should look like this by now

🔧 Updating Config Files

🎁 package.json

• Copy and paste the below lines in your package.json file under the “scripts” dictionary/object.

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

• your package.json file should look like this:

🧪 tsconfig.json

• Now the important part, open the tsconfig.json file and do the following.

Press ctr + F (or command + F on mac) and search rootDir. (you’ll find it under Modules comment)

1. Uncomment by removing the “//” symbol from the beginning and modifying rootDir as below
2. "rootDir": "./src/"

Again press ctr + F (or command + F on mac) and look for outDir in the tsconfig.json file (you’ll find it under the Emit comment)

1. and update it as the following by removing the “//” from the beginning.
2. "outDir": "./dist"

Keep everything as it is, no need to add a comma or full stop after these edits.

🚀 Simple Express Server using TypeScript

• Populate the index.ts file using the below code.

• let’s start our Express server by entering the below command on your terminal.

>> nodemon src/index.ts

• Open the URI i.e. http://localhost:8080/ in your browser/postman app or you can make a curl request using your terminal.

I am not going anywhere from my terminal.

>> curl -X 'GET' http://localhost:8080/
>> # or - both works - below automatically understands that its a GET req.
>> curl http://localhost:8080/

📦 Database

Let's create one dummy (in-memory database) for our application so that we can perform all the required crud operations.
First, we will create a structure for the data we want to handle, i.e. the type of data we want in our database also called schema.

• Create a file called task.ts or name it as task.schema.ts in the interfacesfolder and paste the below code in it.

• Quickly create one dummy database called tasks. For that create a file called tasks.db.ts inside the modelsfolder. Paste the below code.

📌Business Logic

Let’s think through this, what can we do with this database? rather what services we can provide to our application users.

1. A user can request to get a list of tasks. OR maybe he/she would like to get details of a particular task — GET requests
2. A user might want to create a task — POST request
3. A user might want to update a particular task — PUT/PATCH request.
4. User might want to delete a task. — DELETE request.

Let’s write some code for the above functionalities. Create a new file called tasks.controller.tsinside controllers folder and paste the below code in it.

📍 Routes

We want to define routes through which users can access the above services. Inside routes folder create one file called task.router.ts file and populate it with the below code.

• Finally, let’s connect these routes to our main application server. Meaning- from our localhost:8080/URI, users can use our services.
• Update index.ts

🧫 Testing endpoints

let's visit these endpoints to check if our services are working as expected.

>> curl -X 'GET' localhost:8080/api/v1/tasks
>> curl -x 'GET' localhost:8080/api/v1/tasks/5

>> echo "CREATING NEW TASK"
>> curl -d "title=New task" -d "description=Example Description" -X 'POST' localhost:8080/api/v1/tasks/create

>> echo "UPDATING TASK"
>> curl -X 'PUT' localhost:8080/api/v1/tasks/update/2

>> echo "DELET A TASK"
>> curl -X 'DELETE' localhost:8080/api/v1/tasks/2

Hope you’re getting correct responses from our endpoints.

Future improvements

• Finding bugs
• Introduction to additional services. Such as retrieving all the tasks that are completed (i.e. tasks which are having completed status to true)
• Deleting those tasks that are completed. If the user has updated the task status completed to true then there might be no need for such tasks to be present in the database.
• ….

This was my first article, I hope you’ve learned something from this tutorial.