How to call APIs using Axios in TypeScript?

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
Copy
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
Copy
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
Copy
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
Copy
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.

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.

Famous Quotes API Playground on RapidAPI Hub

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
Copy
const axios = require('axios');

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

ts
Copy
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
Copy
const axios = require('axios');
interface Response {
	text: string;
	author: string;
	category: string;
	id: number;
}
function getQuotes() {
	const options = {
		method: 'GET',
		url: 'https://famous-quotes4.p.rapidapi.com/random',
		params: { category: 'all', count: '2' },
		headers: {
			'X-RapidAPI-Key': 'your-rapid-key',
			'X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com',
		},
	};
	axios
		.request(options)
		.then(function ({ data }: { data: Response }) {
			console.log(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, query parameters, and headers. Afterward, we called axios request method and provided it with the options object. We also created a TypeScript interface and used it for the data variable to define types for our incoming API response.

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

Lastly, let's call the function.

ts
Copy
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
Copy
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 Rapid API Hub to find the API and also utilized one of its code snippets.

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