How I Learned TypeScript for React in 4 Days?

Almost two years ago, I started working as a React developer without intending to learn or use TypeScript for my React projects. Although I love learning new languages and frameworks, I just wanted to keep my code precise and simple.

But guess what? I was so wrong and missed out too much! Typescript gave me a better and new perspective for my React Projects. However, searching for the right Typescript learning resources took longer than learning it.

So, to save you from this hassle and add a new language to your skillset, I’ll share a step-by-step learning roadmap. Following these resources, as I did, you can learn Typescript in just 4 days and implement it in your React projects.

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. Should You Learn TypeScript as a React Developer?

2. How Long Will It Take to Learn React Typescript?

7 Resources to Learn Typescript as a React Developer

While learning Typescript, I documented every step. Later on, I reviewed my approach and found some unnecessary resources and mistakes. So, the following steps are the most useful and easiest to learn Typescript quickly.

But will only learning Typescript help? No, you must implement whatever you get to know about it. Therefore, some steps are for implementation for hands-on practice.

1. Learn the Typescript Basics Through a YouTube Course

As a beginner, you should know what TypeScript is, why it's important, and where to learn it from scratch. So, here are the answers to these three problems:

• TypeScript is an open-source programming language built by Microsoft to help you catch errors at early stages using its static typing feature.

• Unlike JavaScript coding, TypeScript makes it easier for you to debug code and increases its readability. So, adding it to your skillset makes coding more accessible.

• 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 beneficial for beginners – just like you and me! Once you watch this introductory course, you'll build a foundation for TypeScript to use in your React projects.

2. Mimic the Typescript To-do App from the YouTube Tutorial

Once you watch this introductory course, you'll build a foundation for TypeScript to use in your React projects. However, theory is good for understanding the concepts, but implementation is a must.

So, move to the development phase.

I developed the to-do app as it is pretty fun and exciting. It was a mimic of a tutorial I found on YouTube. This tutorial is 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.

Wait, don't just fall into tutorial hell — practice what you learn!

I've crafted a special Free ReactJS challenge just for you - and it's all about CRUD, a key skill for any React developer..

In this project, practice your React and Typescript skills by creating a task manager app with React and TypeScript.

3. Implement Typescript in your own React Projects

Do you have some React projects? If yes, it is a great way to refine your Typescript skills.

Let me give my example first. While implementing Typescript in my projects, I faced many changes. Then, after figuring out the solution, it fastened my learning curve.

So, don't hesitate to use Typescript in your react code and logic. You can also practice this with your proejcts – either your personal or as a part of your job. Plus, TypeScript community and Google is always there to help you wherever you get stuck.

It worked out for me, so I hope the same for you.

4. Use GitHub Repos to Know more about React TypeScript

One rule applies to all coding languages: One simple task can be performed in several ways. Whatever you develop using Typescript (or any other language), search others' code for the same logic. It'll give a different perspective and new logic to the code.

When implementing TypeScript in the Gatsby project, I found a similar code on GitHub. I searched "Gatsby blog with TypeScript GitHub." It solved many problems related to the React project I worked on, like markdown, node types, and more.

This is a very usable and meaningful method. Learn from other developers by analyzing their codes on similar GitHub repos.

5. Read, Read, and Read to Master Typescript

If you love learning through 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. You can 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 and a Medium-inspired website and even experiment with a digital e-commerce app.

Book readers, what are you waiting for? Start your learning journey by doing your favourite task!

6. ChatGPT: A new way to learn Typescript

ChatGPT is a great assistant. It can help you a lot while learning TypeScript. Whenever I get stuck, I paste my React code into ChatGPT and ask it to convert to TypeScript.

This method is beneficial when you quickly transform old project files from JavaScript to TypeScript. You can also ask it to tell you different techniques in Typescript of the same code/logic.

7. Premium and a Perfect Course for Typescript

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

Whether you are a beginner or a seasoned pro, ZTM Academy has the courses and resources you need to take your Full Stack React Developer career to the next level.

In my opinion, it has a comprehensive curriculum. You'll learn the Typescript in a way to get hired, build a solid portfolio, and advance your career in record time.

A developer mostly learns from other developers, and the ZTM community has 400,000+ students, alumni, mentors, and instructors. You can get support from them at every step of your Typescript journey. They'll motivate you, troubleshoot problems, and network with other professionals in your field.

Wrapping Up…

TypeScript can add significant value and simplicity to your React projects – no matter how complex. It can give you long-term benefits, and you can do much using it for your React projects.

Learning and implementing TypeScript in React projects is easy if you have more than a year of development experience with a strong foundation in JavaScript and React. Don’t worry if you are a beginner – practice makes a developer’s logic solid.

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 hope you found value in this article and feel encouraged to give TypeScript a try.