Exploring TypeScript: generics (w/ React example)
TypeScript generics is a topic I needed help grasping for a long time. I decided to learn about it and write a blog post to understand it better. As well as play around with real-world React example.
Hey, it’s Edvins. Happy Friday! We made it through this week alive.
The last post about useMemo overdose went viral on /r/reactjs (~45.5k views), This Week In React newsletter (~25k developers), and even inspired @shashkovdanil to create an eslint-plugin-usememo-recommendations (~20 github stars already) eslint plugin. My digital garden gained a lot of traction and page views, and I got an extra ~15 newsletter subscribers. I call it a huge success, especially considering that while writing those blog posts, I have zero expectations that anyone will read them.
Let’s return to this week's post — Exploring TypeScript generics. It would be best if you didn’t waste any time, so I have already prepared the tl;dr edition for those who want to get to the topic. Yet to see its usage with the React `useFetch` hook, check out the link below.
tl;dr
TypeScript generics is a powerful tool that significantly enhances your code's flexibility and type safety.
You can create reusable components and functions that work seamlessly with different data types by leveraging generics.
The React custom
useFetchhook example showcased how generics can help you handle diverse API responses while maintaining type correctness.As your projects evolve, incorporating generics into your toolkit will prove invaluable.