Building a Typesafe API Wrapper
A Clean Solution to a Tedious TypeScript Problem
“Type Safety: Where code wears a seatbelt even before hitting the road.”
Today I present to you a lightweight, framework-agnostic API wrapper to guarantee Typesafe data fetching
Requires minimal boilerplate, and it builds upon the standard fetch API, therefore no additional dependencies to bloat your applications.
So without further ado… Lets dive right in.
Creating our Type Definition
Lets begin by creating a simple type, CreateAPIMethod, that will specify the expected inputs and outputs for our API, plus all necessary options to make the API call (e.g. request method, URL).
Constructing our Typesafe API Method
Lets define a “constructor” method createAPIMethod to create a Typesafe fetch request template.
The purpose of createAPIMethod is to create a templated fetch request which is fully Typesafe; similar to a class constructor.
Remember, a GET request cannot have a body, which is why I set the request body as undefined for GET.
We will then define a Typesafe API method getPostBodies to GET data from the jsonplaceholder testing API.
Here we construct an API method by passing in undefined input for GET.
We expect the output to "include" an array of { body: string } objects.
Next we pass the request method and API URL.
I chose the jsonplaceholder testing API, but this works on all APIs.
Testing our Typesafe API Method
We can test our Typesafe API method by defining a function printPostBodies to return posts bodies and print them out into an array.
Here is the expected output when you request the following API endpoint:
→ GET →
Conclusion
Congratulations!
You now have a portable and lightweight fetch API wrapper that will ensure type safety for every API call you make.
If you enjoyed this article, please make sure to Subscribe, Clap, Comment and Connect with me today! 🌐