DEV Community

Cover image for How To create an API using Node.js, Express, and Typescript
Nayan Patil
Nayan Patil

Posted on • Originally published at nayanpatil.hashnode.dev

How To create an API using Node.js, Express, and Typescript

In this article, we will learn to create an API server using the Express framework and Typescript.

What is API?

An API (Application Programming Interface) is a way of interacting with a service, through a series of predefined requests.

Express

Express is an open-source web framework, for Node.js, designed to make developing websites, web apps, and API's easier.

Typescript

TypeScript is JavaScript with syntax for types, it is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

so let's dive into the tutorial,

Prerequisite:

  • Basic knowledge of NodeJs and Javascript
  • Basics of TypeScript

Step 1: Initialize the npm project

To initialize the project in the working directory and create a package.json file by running the below command in terminal

npm init -y
Enter fullscreen mode Exit fullscreen mode

After running this command it will create the package.json file in the working directory

Step 2: Installing the dependencies

Now we have to install the required dependencies to create this API

npm install express dotenv
Enter fullscreen mode Exit fullscreen mode

Dotenv - Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env

Now we need to install the dev dependencies for typescript support
using --save-dev flag

npm install @types/node @types/express nodemon ts-node --save-dev
Enter fullscreen mode Exit fullscreen mode

Now create a tsconfig.json file and save it with the below code

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./",
    "outDir": "./build",
    "esModuleInterop": true,
    "strict": true
  }
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Add scripts in package.json file to run file

  "scripts": {
    "start": "ts-node server.ts",
    "dev": "nodemon --exec ts-node server.ts"
  },
Enter fullscreen mode Exit fullscreen mode

Note - server.ts file which we will create in the next step

Step 4: Create a .env file

There are some details like port number, database URLs, username etc. which should be hidden and not to be exposed to public

so create a .env file and declare the port number

PORT=8080 
Enter fullscreen mode Exit fullscreen mode

Step 5: Create a server.ts file

Now comes an interesting part, creating server.ts file in root folder

first, we will import the packages

import Express from "express"
import dotenv from "dotenv"
Enter fullscreen mode Exit fullscreen mode

Now get the port number from .env file

dotenv.config()
const PORT = process.env.PORT
Enter fullscreen mode Exit fullscreen mode

Now the most important part, declaring '/' endpoint

const app : Express.Application = Express()

app.get("/", (req: Express.Request, res: Express.Response) => {
    res.send("Hello world")
})

app.listen(PORT, () => {
    console.log(`Server is listening on ${PORT}`)
})
Enter fullscreen mode Exit fullscreen mode

we define a / endpoint, that will return the text Hello World!, and run our application on port 8080.

Note that the / endpoint will only match for GET requests, as we've defined it using the app.get method.

Step 6: Running our API

In your terminal, run the following command to start the application:

npm run dev
Enter fullscreen mode Exit fullscreen mode

if you see the output like below

➜  express-typescript npm run dev

> express-typescript@1.0.0 dev
> nodemon --exec ts-node server.ts

[nodemon] 2.0.14
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node server.ts`
Server is listening on 8080
Enter fullscreen mode Exit fullscreen mode

Great! now open your browser and navigate to localhost:8080. If everything worked successfully, "Hello World" should be displayed in your browser.

Congratulations, You have created API using express and typeScript

Full code -

import Express from "express"
import dotenv from "dotenv"

dotenv.config()

const PORT = process.env.PORT

const app : Express.Application = Express()

app.get("/", (req: Express.Request, res: Express.Response) => {
    res.send("Hello worrld")
})

app.listen(PORT, () => {
    console.log(`Server is listening on ${PORT}`)
})
Enter fullscreen mode Exit fullscreen mode

Loved the article?
Follow me on -
Twitter

Discussion (3)

Collapse
andrewbaisden profile image
Andrew Baisden

Nice simple guide got to get more developers to write TypeScript.

Collapse
jonrandy profile image
Jon Randy

And the point of including TypeScript was... ?

Collapse
nayanpatil1998 profile image
Nayan Patil Author

TypeScript simplifies JavaScript code, making it easier to read and debug, it can help us to avoid painful bugs that developers commonly run into when writing JavaScript by type checking the code.
This was the small example to understand features of typescript, I will write more blogs for good example