Creating a Node.js API with Express and TypeScript

Photo by James Harrison on Unsplash

In this tutorial we will create a Node.js API using Express and all the features that TypeScript brings to us.

We will start by initializing our project and installing some dependencies. I’ll be using yarn for this tutorial, but feel free to use npm if you prefer.

mkdir new-project
cd new-project
yarn init -y

First we create our project folder, open it and initialize our project using yarn init -y, creating a package.json file. Now we have to install some dependencies:

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

We start by installing the express. Then we install the typescript and the ts-node libraries to add TypeScript support to our project, and nodemon to make our server listen to modifications (so we don’t have to restart our project everytime we make a change to some file). Finally, we will install some types to avoid some future trouble.

With the libraries installed, now we have to create our tsconfig.json. This is the file that defines the TypeScript configurations, like what folders it should check and to what folder it should build the files.

Create the tsconfig.json file inside the project folder:

tsconfig.json

The last modification that we need to do is to our package.json file. We will add the scripts to run our project on development (with nodemon and ts-node) and to build and start from the built files.

Modify your package.json file so it looks like (but it doesn’t have to be exactly equal) the one below. Focus on the scripts part:

package.json —Your file don’t have to be exactly like this. Just focus on the scripts part

We are creating three scripts:

• “build” will run the tsc command to compile our .ts files into .js files inside the folder that we define on tsconfig.json (dist folder);
• “start:prod” will start the built server.js file inside the dist folder;
• “start:dev” will start our project with nodemon (who will run ts-node), making our server listen to any modifications to the files on our project folder.

After installing and setting up everything, we can finally create our API. We will starting by creating a src folder to contain all the code inside our project.

Create the app.ts file inside the src folder:

app.ts

The App class is used to instantiate the server, using express. This way adds more complexity, but makes the code more easily to mantain. As we can see from the import, we will need to import routes from a routes.ts file, so let’s create it.

Create the routes.ts file inside src folder:

routes.ts

As always, we have our “Hello World”. On this file we will be adding every route that we’ll use on our API. Now, the last step is to create the file that will start our server. From the package.json scripts we know that the filename will be server.ts, so…

Create the server.ts file inside the src folder:

server.ts

And we are ready to go. Just run the start command and test on your http://localhost:3333/

yarn start:dev

If you want to deploy your application, you just have to run:

yarn build
yarn start:prod

And that’s it. We have our server developed using Express and TypeScript. Sure we have to do some extra steps, but it’s definitely worth the time, as the TypeScript adds some awesome layers of protections and usabilities.

If you want to verify the final code, check it here. And if you want to continue to develop this API adding a database and routes to Create, Read, Update and Delete (CRUD) records, check out my other tutorial which is a continuation of this one:

Adding and Using a Database on a TypeScript API with TypeORM