Automatically Generating API Call Type Definitions in TypeScript.

It's time to stop creating tedious type definitions manually for API responses.

In the past, whenever I made API calls in TypeScript, whether on the frontend or backend, I would painstakingly create type definitions by hand. This process involved examining the structure of the API response and then writing out the corresponding TypeScript types. For instance, if the response looked like this:

{
  "id": 1,
  "name": "John Doe",
  "email": "john.doe@example.com"
}

I would manually define a TypeScript interface to match this response:

interface User {
  id: number;
  name: string;
  email: string;
}

This manual approach was not only time-consuming but also prone to errors, especially when dealing with complex or nested data structures. Additionally, any changes in the API response required updating the type definitions, which could easily be overlooked, leading to potential bugs and inconsistencies in the codebase.

Fortunately, there are now tools and libraries available that can automate this process, generating type definitions directly from the API responses. This not only saves time but also ensures that the types are always in sync with the actual data being returned by the API. By leveraging these tools, developers can focus more on building features and less on the repetitive task of writing type definitions.:

{
    "products": [
        {
          "id": 59,
          "title": "Spring and summershoes",
        },
        {
          "id": 88,
          "title": "TC Reusable Silicone Magic Washing Gloves",
        }
}

then sure, I will create definitions like this way:

export interface IProduct {
    "products": Array<{
        id: number;
        title: string;     
    }>
}

okay, it's easy because the return of the JSON string from the API Server is not complex enough. but how about this:

{
  "products": [
    {
      "id": 7,
      "title": "Samsung Galaxy Book",
      "description": "Samsung Galaxy Book S (2020) Laptop With Intel Lakefield Chip, 8GB of RAM Launched",
      "price": 1499,
      "discountPercentage": 4.15,
      "rating": 4.25,
      "stock": 50,
      "brand": "Samsung",
      "category": "laptops",
      "thumbnail": "https://i.dummyjson.com/data/products/7/thumbnail.jpg",
      "images": [
        "https://i.dummyjson.com/data/products/7/1.jpg",
        "https://i.dummyjson.com/data/products/7/2.jpg",
        "https://i.dummyjson.com/data/products/7/3.jpg",
        "https://i.dummyjson.com/data/products/7/thumbnail.jpg"
      ]
    },
    {
      "id": 8,
      "title": "Microsoft Surface Laptop 4",
      "description": "Style and speed. Stand out on HD video calls backed by Studio Mics. Capture ideas on the vibrant touchscreen.",
      "price": 1499,
      "discountPercentage": 10.23,
      "rating": 4.43,
      "stock": 68,
      "brand": "Microsoft Surface",
      "category": "laptops",
      "thumbnail": "https://i.dummyjson.com/data/products/8/thumbnail.jpg",
      "images": [
        "https://i.dummyjson.com/data/products/8/1.jpg",
        "https://i.dummyjson.com/data/products/8/2.jpg",
        "https://i.dummyjson.com/data/products/8/3.jpg",
        "https://i.dummyjson.com/data/products/8/4.jpg",
        "https://i.dummyjson.com/data/products/8/thumbnail.jpg"
      ]
    },
... and thousands more
}

Maybe you can manually type that definition, but what if maybe the API response is more complex than above ? or maybe you have hundreds of API endpoints with different structures?

Create it automatically

To save your precious time and effort, I recommend using a tool called Thunder Client, which is available as a free extension for VS Code. Thunder Client is my favorite alternative to Postman and Insomnia because it is lightweight, fast, and easy to use. One of its standout features is its ability to generate code and types automatically, which can be a huge time-saver, especially when dealing with complex API responses or multiple API endpoints with different structures.

Let's go ahead and install Thunder Client and give it a try:

1. Open VS Code and navigate to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.

2. In the search bar, type "Thunder Client" and press Enter.

3. Click the Install button next to the Thunder Client extension.

4. Once installed, you can open Thunder Client by clicking on its icon in the Activity Bar.

With Thunder Client, you can easily create and manage your API requests, and it will automatically generate the necessary code and types for you. This makes it an invaluable tool for developers who need to work with APIs efficiently.

URL endpoints: https://dummyjson.com/products/search?q=Laptop

Then in the right upper corner, we can see small {} bracket icons. click it

Now we got fetch the javascript code, and the next step is to click generate Types

Viola! now we have a typescript interface definition without manually creating it.