I have always felt a bit annoyed whenever I’m working on a project and I have to add types to an api response. The process usually goes like this: write a function to fetch data
call the function on a component or page
either log the response or inspect the network tab to view the response
copy this response, create a new file and paste the response
start editing the response to create a new type or interface
import the new type to the function file and set it’s return type. This had been going on for a while and then I thought to find a way to automate it. This led to my discovery of a few libraries that can generate types. Unfortunately they were not convenient to work with because they were not generating the types effortlessly and in realtime. They required a lot of manual process as well. I wanted something I could just plug in and be done with and continue with my normal development flow. So I decided to build a library that will automate this process for me. realtime-api-types The aim of this library is to take the pain away from trying to add types from your api responses. With this library, as you get responses from an api, it generates the type for you and saves it to your project, in real time. It also imports the new type and sets it as the return type of your api call. Just import the helper function and start the server. Thats all. You can then go on with your normal development flow. This setup is meant only for development and not for production! You should not deploy this into your production pipeline. This library was inspired by an old project I stumbled upon, called MakeTypes. Installation To get started, simply run: npm install realtime-api-types --save-dev Configuration There are some configs you need to set. Go to your package.json and add the following: "realtime-api-types": {
"objectType": "type",
"typePath": "src/types",
"apiPath": "src/apis",
"fetchType": "axios"
} The shape of the config is: export type Config = {
 objectType: 'interface' | 'type'; // whether you want to generate interfaces or types
 fetchType: 'fetch' | 'axios'; // how you fetch data, fetch or axios
 typePath: string; // the path to where you want to save generated types
 apiPath: string; // the path to where your api methods exist
} Start Service To start the type generator service, run: npx realtime-api-types - init Code Sample & Usage Wrap your apis in an object and wrap the object with typedApiWrapper. You should make your api methods pure, simply return the api call. // Example
// src/apis/exercise.ts api file
import {typedApiWrapper} from "realtime-api-types"
import axios from 'axios'

export const ExerciseApi = typedApiWrapper({
  // with fetch, property assignment style
  getExercises: () => fetch("https://example-api.com").then((res) => res.json()),
  // with axios, method style
  getExerciseById(id: string) {
    return axios.get(`https://example-api.com/${id}`);
  },
  // api post method
  postExercise(data: any) {
  return axios.post(`https://example-api.com`, data)
  }
});

// src/App.tsx file
useEffect(() => {
  ExerciseApi.getExercises()
}, []) With this setup, whenever an api is called at any point in time, the service will intercept and try to generate type from the response. When type generation is successful, the example file above would be automatically updated to something like this: // updated exercise.ts api file
import {typedApiWrapper} from "realtime-api-types"
import axios from 'axios'
import { GetExercises } from "../types/getExercises";
import { GetExerciseById } from "../types/getExerciseById";
import { PostExercise } from "../types/postExercise";

export const ExerciseApi = typedApiWrapper({
  // with fetch, property assignment style
  getExercises: (): Promise<GetExercises> => fetch("https://example-api.com").then((res) => res.json()),
  // with axios, method style
  getExerciseById(id: string): Promise<{ data: GetExerciseById }> {
    return axios.get(`https://example-api.com/${id}`);
  },
  // api post method
  postExercise(data: any): Promise<{ data: PostExercise }> {
    return axios.post(`https://example-api.com`, data)
  }
}); Naming Convention Note the naming convention in the example above. The name of the type file is the same as the name of the api method called.
The name of the type itself is the same as the name of the api method but in pascal case. React Native or Expo For this to work with React native or Expo, make sure you follow their guide on how to enable api calls to localhost Limitations Cannot generate enums from response.


Cannot extend type from different type files. If the response from a call contains object that is similar to another type in another file, it cannot extend it. A new type will be generated in the new file.


Cannot give custom file names or type names. File name and type name is solely based on the name of the api method.


Once a type has been generated for an api call, the type will not update with new api calls. You need to delete the previous generated type file to generate a new one. This library only serves to help you get started quickly and reduce time spent adding types to api calls. You might need to make some updates to the generated types sometimes. It does not solve all your type problems. Let me know what you think and please feel free to contribute to the repo at https://github.com/ifeoluwak/realtime-api-types npm — https://www.npmjs.com/package/realtime-api-types github — https://github.com/ifeoluwak/realtime-api-types I have always felt a bit annoyed whenever I’m working on a project and I have to add types to an api response. The process usually goes like this: write a function to fetch data call the function on a component or page either log the response or inspect the network tab to view the response copy this response, create a new file and paste the response start editing the response to create a new type or interface import the new type to the function file and set it’s return type. write a function to fetch data call the function on a component or page call the function on a component or page either log the response or inspect the network tab to view the response either log the response or inspect the network tab to view the response copy this response, create a new file and paste the response copy this response, create a new file and paste the response start editing the response to create a new type or interface start editing the response to create a new type or interface import the new type to the function file and set it’s return type. import the new type to the function file and set it’s return type. This had been going on for a while and then I thought to find a way to automate it. This led to my discovery of a few libraries that can generate types. Unfortunately they were not convenient to work with because they were not generating the types effortlessly and in realtime. They required a lot of manual process as well. I wanted something I could just plug in and be done with and continue with my normal development flow. So I decided to build a library that will automate this process for me. realtime-api-types realtime-api-types The aim of this library is to take the pain away from trying to add types from your api responses. library With this library, as you get responses from an api, it generates the type for you and saves it to your project, in real time. With this library, as you get responses from an api, it generates the type for you and saves it to your project, in real time. With this library, as you get responses from an api, it generates the type for you and saves it to your project, in real time. With this library, as you get responses from an api, it generates the type for you and saves it to your project, in real time. It also imports the new type and sets it as the return type of your api call. It also imports the new type and sets it as the return type of your api call. It also imports the new type and sets it as the return type of your api call. It also imports the new type and sets it as the return type of your api call. Just import the helper function and start the server. Thats all. You can then go on with your normal development flow. Just import the helper function and start the server. Thats all. You can then go on with your normal development flow. Just import the helper function and start the server. Thats all. You can then go on with your normal development flow. Just import the helper function and start the server. Thats all. You can then go on with your normal development flow. This setup is meant only for development and not for production! You should not deploy this into your production pipeline. This setup is meant only for development and not for production! You should not deploy this into your production pipeline. This library was inspired by an old project I stumbled upon, called MakeTypes . MakeTypes Installation Installation To get started, simply run: npm install realtime-api-types --save-dev npm install realtime-api-types --save-dev Configuration Configuration There are some configs you need to set. Go to your package.json and add the following: package.json "realtime-api-types": {
"objectType": "type",
"typePath": "src/types",
"apiPath": "src/apis",
"fetchType": "axios"
} "realtime-api-types": {
"objectType": "type",
"typePath": "src/types",
"apiPath": "src/apis",
"fetchType": "axios"
} The shape of the config is: export type Config = {
 objectType: 'interface' | 'type'; // whether you want to generate interfaces or types
 fetchType: 'fetch' | 'axios'; // how you fetch data, fetch or axios
 typePath: string; // the path to where you want to save generated types
 apiPath: string; // the path to where your api methods exist
} export type Config = {
 objectType: 'interface' | 'type'; // whether you want to generate interfaces or types
 fetchType: 'fetch' | 'axios'; // how you fetch data, fetch or axios
 typePath: string; // the path to where you want to save generated types
 apiPath: string; // the path to where your api methods exist
} Start Service Start Service To start the type generator service, run: npx realtime-api-types - init npx realtime-api-types - init Code Sample & Usage Code Sample & Usage Wrap your apis in an object and wrap the object with typedApiWrapper . typedApiWrapper You should make your api methods pure, simply return the api call. // Example
// src/apis/exercise.ts api file
import {typedApiWrapper} from "realtime-api-types"
import axios from 'axios'

export const ExerciseApi = typedApiWrapper({
  // with fetch, property assignment style
  getExercises: () => fetch("https://example-api.com").then((res) => res.json()),
  // with axios, method style
  getExerciseById(id: string) {
    return axios.get(`https://example-api.com/${id}`);
  },
  // api post method
  postExercise(data: any) {
  return axios.post(`https://example-api.com`, data)
  }
});

// src/App.tsx file
useEffect(() => {
  ExerciseApi.getExercises()
}, []) // Example
// src/apis/exercise.ts api file
import {typedApiWrapper} from "realtime-api-types"
import axios from 'axios'

export const ExerciseApi = typedApiWrapper({
  // with fetch, property assignment style
  getExercises: () => fetch("https://example-api.com").then((res) => res.json()),
  // with axios, method style
  getExerciseById(id: string) {
    return axios.get(`https://example-api.com/${id}`);
  },
  // api post method
  postExercise(data: any) {
  return axios.post(`https://example-api.com`, data)
  }
});

// src/App.tsx file
useEffect(() => {
  ExerciseApi.getExercises()
}, []) With this setup, whenever an api is called at any point in time, the service will intercept and try to generate type from the response. When type generation is successful, the example file above would be automatically updated to something like this: // updated exercise.ts api file
import {typedApiWrapper} from "realtime-api-types"
import axios from 'axios'
import { GetExercises } from "../types/getExercises";
import { GetExerciseById } from "../types/getExerciseById";
import { PostExercise } from "../types/postExercise";

export const ExerciseApi = typedApiWrapper({
  // with fetch, property assignment style
  getExercises: (): Promise<GetExercises> => fetch("https://example-api.com").then((res) => res.json()),
  // with axios, method style
  getExerciseById(id: string): Promise<{ data: GetExerciseById }> {
    return axios.get(`https://example-api.com/${id}`);
  },
  // api post method
  postExercise(data: any): Promise<{ data: PostExercise }> {
    return axios.post(`https://example-api.com`, data)
  }
}); // updated exercise.ts api file
import {typedApiWrapper} from "realtime-api-types"
import axios from 'axios'
import { GetExercises } from "../types/getExercises";
import { GetExerciseById } from "../types/getExerciseById";
import { PostExercise } from "../types/postExercise";

export const ExerciseApi = typedApiWrapper({
  // with fetch, property assignment style
  getExercises: (): Promise<GetExercises> => fetch("https://example-api.com").then((res) => res.json()),
  // with axios, method style
  getExerciseById(id: string): Promise<{ data: GetExerciseById }> {
    return axios.get(`https://example-api.com/${id}`);
  },
  // api post method
  postExercise(data: any): Promise<{ data: PostExercise }> {
    return axios.post(`https://example-api.com`, data)
  }
}); Naming Convention Naming Convention Note the naming convention in the example above. The name of the type file is the same as the name of the api method called. The name of the type itself is the same as the name of the api method but in pascal case. The name of the type file is the same as the name of the api method called . api method called The name of the type itself is the same as the name of the api method but in pascal case . pascal case React Native or Expo React Native or Expo For this to work with React native or Expo, make sure you follow their guide on how to enable api calls to localhost Limitations Limitations Cannot generate enums from response. Cannot extend type from different type files. If the response from a call contains object that is similar to another type in another file, it cannot extend it. A new type will be generated in the new file. Cannot give custom file names or type names. File name and type name is solely based on the name of the api method. Once a type has been generated for an api call, the type will not update with new api calls. You need to delete the previous generated type file to generate a new one. Cannot generate enums from response. Cannot generate enums from response. Cannot extend type from different type files. If the response from a call contains object that is similar to another type in another file, it cannot extend it. A new type will be generated in the new file. Cannot extend type from different type files. If the response from a call contains object that is similar to another type in another file, it cannot extend it. A new type will be generated in the new file. Cannot give custom file names or type names. File name and type name is solely based on the name of the api method. Cannot give custom file names or type names. File name and type name is solely based on the name of the api method. Once a type has been generated for an api call, the type will not update with new api calls. You need to delete the previous generated type file to generate a new one. Once a type has been generated for an api call, the type will not update with new api calls. You need to delete the previous generated type file to generate a new one. This library only serves to help you get started quickly and reduce time spent adding types to api calls. You might need to make some updates to the generated types sometimes. It does not solve all your type problems. This library only serves to help you get started quickly and reduce time spent adding types to api calls. You might need to make some updates to the generated types sometimes. It does not solve all your type problems. Let me know what you think and please feel free to contribute to the repo at https://github.com/ifeoluwak/realtime-api-types https://github.com/ifeoluwak/realtime-api-types npm — https://www.npmjs.com/package/realtime-api-types npm — https://www.npmjs.com/package/realtime-api-types https://www.npmjs.com/package/realtime-api-types github — https://github.com/ifeoluwak/realtime-api-types github — https://github.com/ifeoluwak/realtime-api-types https://github.com/ifeoluwak/realtime-api-types

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Take the Pain Away From Adding Types From Your API Responses With This Automated Library

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps