Auto generate interfaces from API response using RapidAPI VS Code Client

TypeScript is the superset of JavaScript that uses interfaces for type-checking. Creating interfaces for an API response is always a good idea. They help enforce type checking and make the API call more readable and easy to use in TypeScript applications. However, as the response becomes more extensive and complex, mapping the response to an interface becomes difficult. The RapidAPI extension for VSCode fixes this problem by generating interfaces automatically. Let's see how we can use the RapidAPI VSCode extension for this purpose.

STEP #1: 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 #2: Call the API

First, we must find an API to call in our TypeScript application. You can skip to the next part if you already have an API.

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

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.

Added API URL and Request Method

Now specify the query parameters in the Query Tab.

Query parameters set for the API Call

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

Header values set for the API Call

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

Famous Quotes API Response

STEP #3: Auto-Generate Interfaces

Once we get the response, the extension can automatically generate TypeScript interfaces for you. 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.

Generate 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. For example, here is the response of the JSON Placeholder API's user endpoint:

json
Copy
{
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-770-736-8031 x56442",
  "website": "hildegard.org",
  "company": {
    "name": "Romaguera-Crona",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}

Using the RapidAPI VSCode extension, we generated the interface for it with one click. It looks like this:

ts
Copy
export interface RootObject {
 address: Address;
 company: Company;
 email: string;
 id: number;
 name: string;
 phone: string;
 username: string;
 website: string;
}
export interface Address {
 city: string;
 geo: Geo;
 street: string;
 suite: string;
 zipcode: string;
}
export interface Geo {
 lat: string;
 lng: string;
}
export interface Company {
 bs: string;
 catchPhrase: string;
 name: string;
}

Wrap Up

Pretty handy, right? Other than TypeScript, you can use the same process to create types for Python and Swift from any API response. So without further ado, install RapidAPI VSCode Client and find an API from RapidAPI Hub to get your hands on API Development from VSCode.