Auto generate interfaces from API response using RapidAPI VS Code Client

Mon Jul 25 2022

4 min read

Interfaces help developers enforce type checks on the data received in the API response. Consequently, the code quality and readability are also improved.

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.

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

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.

Get access to Thousands of APIs
Struggling to find APIs? RapidAPI Hub is the world’s largest API hub where you can find all kinds of APIs of your choice. 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.

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.

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

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.

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

json
{
"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
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.