API development in TypeScript using RapidAPI VS Code Client

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.

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.

RapidAPI VSCode Extension Installation Page

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:

Create New API Request

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.

Adding Endpoint URL and Request Method

Now specify the query parameters in the Query Tab.

Adding Query Parameters

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

Setting Header Values

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

Famous Quotes API Response

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.

Generating TypeScript Interface

It will generate this interface file for you:

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

Generating TypeScript Code Snippet

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

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