This article was published on Thursday, May 2, 2024 by Tuval Simha @ The Guild Blog
Embarking on my journey as a developer, I sought a project that would not only be educational but
also enjoyable. As a junior developer, I encountered the challenges of working with REST APIs,
particularly the lack of type safety. This led me to explore feTS, a tool designed to simplify REST
API development, offering type safety, efficiency, and seamless integration with TypeScript and
OpenAPI.
Exploring feTS: Elevating Type Safety in REST API Development
feTS, derived from ‘Fetch’ and ‘TypeScript,’ emerged as a game-changer in the realm of REST APIs. By
leveraging TypeScript and the OpenAPI specification, feTS ensures clarity in data exchange between
the client and server, significantly reducing errors during development. This blog post delves into
a practical example – building a Random Gif Generator – to showcase how feTS transforms the
development experience.
Building a Random Gif Generator
Step 1: Getting Started with Giphy API
To demonstrate the power of feTS, let’s create a Random Gif Generator using the Giphy API. Begin by
obtaining a free API key from the Giphy developer portal here.
Step 2: Integrating OpenAPI Definitions into TypeScript
Incorporate the Giphy API’s OpenAPI definitions into a TypeScript file, exporting them with the as
const modifier for strong typing. This integration ensures seamless cooperation with feTS. You can
find the Giphy OpenAPI definitions here.
Step 3: Installing feTS and Creating a Client
Install feTS using your preferred package manager and create a client using the createClient
function. The client instantiation involves providing the normalized OpenAPI types and specifying
the Giphy API endpoint.
import openAPIDoc from ‘./openapi‘
export const client = createClient<NormalizeOAS<typeof openAPIDoc>>({
endpoint: ‘https://api.giphy.com/v1‘
})
You can find the complete OpenAPI definitions for the Giphy API
here
Step 4: Building Endpoints with feTS
const response = await client[‘/gifs/random‘].get({
query: {
api_key: ‘YOUR_API_KEY_HERE‘
}
})
const gifData = await response.json()
return gifData
}
Step 5: Utilizing the Gif Data
Now, you can easily use the fetchRandomGif function in your application to obtain random gif data.
Leverage the type safety provided by feTS to ensure accurate handling of the API response.
import { fetchRandomGif } from ‘./feTS/endpoint‘
function App() {
const { data, isLoading, error } = useQuery(‘randomGif‘, fetchRandomGif)
if (isLoading) {
return <div>Loading…</div>
}
if (error) {
return <div>Error: {error.message}</div>
}
return (
<div>
<img src={data?.data.image_url} alt=“Random Gif“ />
</div>
)
}
export default App
Advantages of feTS in Gif Generator Development
Clarity in Development
feTS simplifies endpoint definitions, making API navigation clear and straightforward. The
structured interface enhances collaboration and understanding among developers.
Speedy Implementation
With feTS, manual response parsing becomes a thing of the past. Auto-generated API clients and
TypeScript types accelerate the development process.
Type Safety at Its Best
Enjoy robust type safety throughout the development cycle. feTS catches potential issues at compile
time, ensuring a reliable and error-free application.
Conclusion: Elevating Gif Generator Development with feTS
Building a Random Gif Generator using feTS exemplifies the tool’s prowess in enhancing type safety,
clarity, and efficiency in REST API development. By adopting feTS, developers can create
applications with confidence, focusing on features rather than worrying about type-related
challenges.
As you embark on your journey with feTS, remember that it’s not just a tool; it’s a paradigm shift
towards seamless and elevated REST API development. Happy coding!
The full code for this Random GIF Generator example is available on
GitHub, and live demo can be found
here.
