Typescript, a hero!

Yash Sangai
Sep 29 · 3 min read
Typescript hero

Two months ago our team launched an in-house web-based tool that served as a means to manage the entire supply over the platform. This tool served as a single stop-shop to manage all aspects of a partner’s journey on the platform, right from their scouting to eventual exit.

We researched many existing ERPs but none of them served our use cases or didn’t have the capability to be customized based on our needs. Then we came up with a conclusion that let’s build the tool from scratch.

As this tool had a huge impact on one of the core pillars of our organization, so we went on scouting to find out a good framework/language that not only is scalable but easy to read and maintain.

And then we thought of using Typescript!.

In this article, I will be letting you know few major points on what Typescript has helped us during our development, and its results.

Easy Documentation of Components

It is easy to define Prop types using typescript that makes our code clean, easier to read, use and maintain. And this will go along with IntelliSense support and static type checking.

With these two in combination makes the development experience smoother and also reduces the potential for Bugs 🐛.

Typescript component with Prop Types

Note: We used Storybook too for documenting, reusing Independent components and keep a consistent design across the project.

Static Type checking and IntelliSense

Static Type checking

Static type checking

Static type checking helps us to identify errors beforehand. The above example, correctly identifies that the getUserDetails function requires a string rather than a number.

Better Intellisense

IntelliSense at its peak

When static type checking and IntelliSense combine together, it gives you confidence that Intellisense is 100% correct and accurate.

Along with that, refactoring is also much easier since we know the exact Types and where to change them.

Compile Time Errors

Typescript compiled the code with a tighter net for catching errors. The errors used to appear in the terminal itself and we configured our pre-commit hook(used husky) in such a way that the commit gets aborted when the compiler detects errors during compilation.

Due to this, the risk of Undefined errors appearing at runtime was very less and almost zero UI failures on production.

Conclusion

In the end, I can only tell you that it’s a good idea to consider adding Typescript for your next ReactJS project and you can even consider migrating your existing ReactJS project to TypeScript.

Thank you for reading this article. If you have enjoyed it, please feel free to let us know in the comments. Happy Coding!!

NextJS with Typescript Boilerplate: https://github.com/vercel/next.js/tree/canary/examples/with-typescript

Frontend Weekly

It's really hard to keep up with all the front-end…

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Yash Sangai

Written by

Senior Frontend Engineer | ReactJS Enthusiast

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co