API development in TypeScript using RapidAPI VS Code Client

Mon Jul 25 2022

4 min read

TypeScript helps developers by offering static typing, which enforces type checks during development instead of run time. Consequently, the code quality and readability are also improved.

Let's see how you can use the RapidAPI VSCode extension to call APIs in TypeScript.

STEP #1: Find an API

First, we need to find an API to call in our TypeScript application. If you have a list of APIs, you can skip to the next part. Otherwise, head over to RapidAPI Hub and choose an API of your choice.

Get access to Thousands of APIs
RapidAPI Hub is the world’s largest API hub where you can find all kinds of APIs according to your need. Sign up for free to get started.
Sign Up

We will use the Famous Quotes API for this guide. Go ahead and subscribe to it.

STEP #2: Install RapidAPI VSCode Extension

Open VSCode. Press CMD/CTRL + SHIFT + X or click on the Extensions icon on the VSCode sidebar to open the Extensions Marketplace. Search for RapidAPI and select the first one.

Download RapidAPI Client for VS Code
You can also download it from here.
Download

STEP #3: Test the API in RapidAPI VSCode Extension

Once installed, click on the RapidAPI icon in the sidebar and create a new request like this:

It will create a new request tab where we can test the API. To send the request, we need the following things:

  • HTTP Request Method
  • Endpoint URL
  • Query Parameter Values
  • Header values

So go ahead and copy these values from the Famous Quotes API's page.

Now go back to the request tab of the RapidAPI VSCode extension and add the request method with the endpoint URL.

Now specify the query parameters in the Query Tab.

Finally, add the header values in the Headers Tab, including your RapidAPI key.

Now, click on the Send button. It will send the API request and return the response, which looks like this.

We are done testing our API, so let's move on to the next step.

STEP #4: Generate TypeScript Interface Using the RapidAPI Extension

A great thing about the RapidAPI extension is that it can automatically generate TypeScript interfaces for you. We use interfaces to enforce type checking and make the API call more readable and easy to use in TypeScript applications. So, let's create an interface to describe the properties of the API response above.

In the bottom right corner of the Request tab, you will see a JSON to field. Select TypeScript and click on the Generate Code </> button.

It will generate this interface file for you:

ts
export interface RootObject {
author: string;
category: string;
id: number;
text: string;
}

As you can see, it defines the properties of the API response. This feature is particularly useful when working with APIs that return complex objects.

FINAL STEP: Code for the API Call

The RapidAPI extension automatically generates code snippets in multiple languages. At the bottom, you will see a Request Snippet button, select the TypeScript (Fetch) snippet and click on the Generate Code </> button.

You will see a new file with the code snippet in it. It will look like this:

ts
try {
const response = await fetch("https://famous-quotes4.p.rapidapi.com/random?category=all&count=2", {
"method": "GET",
"headers": {
"X-RapidAPI-Key": "your-key"
}
});
if (response.ok) {
const result = await response.json();
console.log(result);
}
} catch (err) {
console.error(err);
}

Finally, we can easily use it in a function getQuotes that will make the API call. Inside the function, we will assign our RootObject interface as a type to the API call and response.

ts
// Interface of the response
export interface RootObject {
author: string;
category: string;
id: number;
text: string;
}
// Function to call the API
async function getQuotes(): Promise<RootObject[]> {
try {
const response = await fetch("https://famous-quotes4.p.rapidapi.com/random?category=all&count=1", {
"method": "GET",
"headers": {
"X-RapidAPI-Key": "your-key"
}
});
if (response.ok) {
// Enforce result to be an array of RootObjects
const result: RootObject[] = await response.json();
return result;
}
} catch (err) {
console.error(err);
}
}

Wrap Up

That is pretty much it. Now we know how the RapidAPI VSCode extension can help us call APIs in TypeScript applications. What's next? Get started by installing RapidAPI VSCode Client, find an API from RapidAPI Hub and enjoy working on APIs without leaving VSCode.