How to call APIs using Axios in TypeScript?

Mon Dec 05 2022

4 min read

Instead of building functionality from scratch, there is often an API available that performs similar functions. There are multiple ways we can call such API while working with JavaScript or TypeScript. We can use the native fetch API or axios if the API call is on the server.

More and more developers are inlining towards TypeScript these days to build applications. It is because TypeScript extends JavaScript and provides additional features like interfaces and types.

In this piece, we will learn how to use Axios in a TypeScript project. So without any further ado, let's jump in!

Setting Up a TypeScript Project (Globally)

We need to set up TypeScript first in order to use it for building applications.

Install TypeScript

TypeScript is a programming language developed by Microsoft. You need to install it globally on your computer. Assuming that you have Node and Node Package Manager (NPM) installed, go ahead and run the following command on your terminal:

sh
npm install -g typeScript

TypeScript Node (ts-node)

To run TypeScript files with Node, we need to install the ts-node, a TypeScript execution engine, and REPL (Read-Eval-Print Loop) for Node.js.

To install it, please go ahead and run the following command in your terminal:

sh
sudo npm install -g ts-node

Call APIs with TypeScript

Let's do it in steps to make it simple and easy to follow:

STEP 1: Install Axios and Node Types

Please create a directory and open it in your preferred code editor. Now open your project terminal and run the following command to install Axios:

sh
npm install axios

We also need to install TypeScript Node Types as a developer dependency. So go ahead and run the following command in your terminal:

sh
npm i --save-dev @types/node

STEP 2: Find an API

The next step is finding an API that we can call in our TypeScript project. We can head to RapidAPI Hub for this purpose.

World's largest API Hub
It is the largest API Hub that houses over 35,000+ APIs. You will need an account to use all these APIs, so go ahead and sign up.
Sign Up

We can use the Famous Quotes API in this project to learn how to call API in TypeScript. So go ahead and subscribe to the API.

STEP 3: Call an API in TypeScript

Go ahead and create an index.ts file in your project directory. We need to import Axios at the top of the file. Let's go ahead and do it.

ts
const axios = require('axios');

Let's now create a function called getQuotes where we will call the API.

ts
const axios = require('axios');
function getQuotes() {
}

RapidAPI Hub provides us with code snippets to call an API in multiple languages. We can use the default one, i.e., (Node.js) Axios. So go ahead and click on the Copy Code button right beside the language dropdown menu.

Once you are done, paste it inside the getQuotes function we created earlier.

ts
const axios = require('axios');
function getQuotes() {
const options = {
method: 'GET',
url: 'https://famous-quotes4.p.rapidapi.com/random',
params: { category: 'all', count: '2'},
headers: {
'X-RapidAPI-Key': 'your-rapidapi-key',
'X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com',
},
};
axios
.request(options)
.then(function (response: any) {
console.log(response.data);
})
.catch(function (error: any) {
console.error(error);
});
}

You can see we have an object called options. Inside it, we have defined a bunch of things like the HTTP method, API endpoint, the query parameters and headers. Afterward, we called axios request method and provided it with the options object.

We have used promise-chaining to handle the response and errors.

Lastly, let's call the function.

ts
getQuotes();

STEP 4: Run the TypeScript file

Now, we need to run the file to make the API call. For this, go ahead and run the following command in your project terminal:

sh
ts-node index.ts

This will execute the file, call the API, and display the results on the terminal.

Wrap Up

That's all, folks. We have successfully called an API in TypeScript using Axios. We used RapidAPI Hub to find the API and also utilized one of its code snippets.

If you want to learn more about RapidAPI Hub, I recommend you take a look at this piece.