Almost two years ago, I started off working as a React developer with no intention of learning or never thought of using TypeScript for any of my React projects. Now don’t get me wrong, I love exploring and trying new things. I just thought to keep my code precise for the sake of not making it too complex.
But guess what? I was so wrong and missed out too much! In fact, learning TypeScript gave me a whole new perspective on my React projects.
So today, I’m going to share my personal experience of how I learned typescript and implement in my recent React project in just 4 days.
Let’s get started…
Before moving to guide I want to address two very important and most common questions here that pop up in your mind.
- The first question that may arise in your mind is do I really need to learn typescript as a React developer?
- How long it will take to learn typescript as react developer?
Do you really need to learn typescript as a React developer?
In my personal experience, it's necessary to build React projects with TypeScript. Initially, it may feel like extra work to write types for each prop and value. However, in the long run, it helps a lot as your project grows. The development will become faster due to static type checking and intelligence.
How long it will take to learn typescript as react developer?
As a mid-level React developer, it only took me four days to implement TypeScript in my React project. You will learn many concepts along the way, so stop thinking and start implementing.
How You Can Learn TypeScript as a React Developer
When using TypeScript in my React projects, I thought of documenting each and every step to let others learn and implement TypeScript in their React projects – just the same way as I did.
So, here are the simple four steps to learn TypeScript as a React Developer:
1. Learning the Basics of TypeScript
For starters, you’ll need to learn what TypeScript is, why it’s important, and where you can learn it from scratch. So, here are the answers to these three things:
- TypeScript is simply an open-source programming language built by Microsoft to help you to catch errors at early stages using its static typing feature.
- Unlike normal JavaScript coding, TypeScript makes it easier for you to debug code and increases its readability.
- You can learn TypeScript from TypeScript Crash Course on YouTube, a simple guide for learning TypeScript basics by Laith Academy. It is about one and a half hours long, but it’s extremely helpful for beginners – just like you and me!
By following the above simple steps, you can have a pretty good foundation for TypeScript to use in your React projects.
2. Mimic Building a to-do app using TypeScript (Youtube Tutorial)
Once done with the basics of TypeScript, you can move on to the development phase. Because the practical implementation of any code makes you learn even more than just watching it.
Here, I’ve basically mimicked the whole process of developing a simple to-do app using TypeScript and React. I found this tutorial super helpful, to-the-point, and exactly what I was looking for – and it’s again by the same instructor at Laith Academy on YouTube.
3. Implement TypeScript for Your Own React Projects
During the development process, you may face some challenges like can’t figure out the exact type. But, this experience will definitely double your learning curve.
So, let's get our hands dirty and implement TypeScript in the React projects – either in your personal space or as a part of your job. Plus, you can always check out the TypeScript community or Google wherever you get stuck. It worked out for me, so I’m hoping the same for you.
4. Search GitHub Repo for TypeScript
One simple task can be performed in several different ways – this is true for all coding languages. That’s why you should often take a look at the code written by other developers in different forums. Learn how they have implemented it, and use it in your own React projects with TypeScript.
When I was implementing TypeScript in the Gatsby project, I found a similar code on GitHub. On the Google search bar, I wrote "gatsby blog with TypeScript GitHub", and this alone solved many problems related to the React project on which I was working at that time. Like markdown, node types, and even more.
This is a very usable method and important too, read others’ code and see how they implemented it on similar GitHub repo.
5. Leverage the Power of ChatGPT
ChatGPT is a great assistant that can help you a lot while learning TypeScript. Whenever I get stuck, I paste my React code into ChatGPT and ask it to convert it to TypeScript.
This method is especially helpful when you need to transform old project files from JavaScript to TypeScript quickly. However, it's important to always recheck and test the code written by ChatGPT to ensure its accuracy and functionality."
Wrapping Up…
TypeScript can add great value and simplicity to your React projects – no matter how complex they may be. Learning TypeScript can give you long-term benefits, and you can do much using it for your React projects.
Realizing all the benefits of using TypeScript in the React projects up till now, I’ve planned to use it more often in my upcoming projects for maximum code value and readability.
I have observed that it is not that difficult to learn and implement typescript in React projects if you have more than a year of development experience, with a strong Javascript and React foundation.
I hope you found value in this article and feel encouraged to give TypeScript a try.