How I Learned TypeScript as a React Developer in Just 4 Days

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.

1. The first question that may arise in your mind is do I really need to learn typescript as a React developer?

2. How long it will take to learn typescript as react developer?

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. Master Typescript Through Reading

If you're a student who thrives on reading, you'll love diving into the comprehensive guide of Fullstack React with TypeScript.

This book provides a complete roadmap to utilizing TypeScript with React. Explore TypeScript patterns, gain valuable insights into the React ecosystem, and learn about testing, Redux, and SSR.

Along the way, you'll build exciting applications like a Trello clone, a Medium-inspired website, and even experiment with a digital-item e-commerce app. Start your learning journey today!

6. 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."

7. Learn Typescript with Premium Course

ZTM Academy: Your one-stop shop for a successful tech career

Whether you're a beginner or a seasoned pro, ZTM Academy has the courses and resources you need to take your tech career to the next level. With our comprehensive curriculum, you'll learn the skills you need to get hired, build a portfolio that makes you stand out, and advance your career in record time.

Our community of 400,000+ students, alumni, mentors, and instructors is here to support you every step of the way. We'll help you stay motivated, troubleshoot problems, and network with other professionals in your field.

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.