How to learn TypeScript for react developers

Posted on:December 20, 2020

react-typescript

In the last couple of years, typescript gains a lot of popularity among the react community. We start seeing more and more people tweeting about using typescript as a default language for their react project. This fact convinces more people to use typescript and start asking about the best way to learn it.

Before digging into how you can start learning typescript for reactjs, it is important to know that typescript is only a superset of JavaScript, which primarily provides optional static typing, classes, and interfaces. This means you are not going to learn an entirely new language.

It’s been a year now when I start using typescript for my react and react-native projects. I am writing this article for everyone using react with javascript and want to start using typescript.

This article reflects precisely my way of learning new technologies. I usually start watching videos to make sure I will have a global vision of what I am trying to learn. I typically don’t care about practice in this step, and I watch multiple videos from different sources. When I feel confident I have an overview, I jump directly to official docs or use some good GitHub repo cheatsheets and start practicing on my projects.

lets Go

1. Overview

In this step, our goal is to have an overview of typescript with react, what we can do, and how.

There is no one better than the fantastic Ben Awad to give you a fast and strict point overview about what you are trying to learn. Ben had a great tutorial about how to start using Typescript in your react code. Typing for props, hooks, and render props. A perfect video to have an overview about react with typescript.

Also, I would recommend reading the typescript section on the official react docs.

2. Practice using react typescript cheatsheets.

As we learn typescript in react, I wouldn’t recommend the official website, which doesn’t mean the typescript official doc is not good. From my experience using official docs, I feel like I am out of the context as I need to focus more on react.

Thanks to our amazing community, I found a GitHub repo cheatsheets with exactly everything you need to start using typescript with react from essential to advanced examples.

I used the cheat sheet for a month working on my first typescript project without looking to any other resources. Until now, I am still visiting the repo every few days :)

3. More Practice: Typescript challenge

At this point, I can work on every react typescript project without any problem. As I usually like reading open source code to learn more patterns and best practices, sometimes I feel lost trying to understand some high-level typing techniques.

That’s why I am trying to complete an online typescript challenge to understand better how the type system works, writing my utilities. Till now, I am having fun with challenges.

4. More More Practice: open source contribution.

In the last couple of months, and to evaluate my skill in a real challenge, I start working on migrating my open-source project reactjs-popup to typescript, and I released a new version completely written with typescript. I mention this because we still have many npm packages without typescript support, and I would recommend everyone contribute by adding typescript to those packages. Learning and helping the community at the same time :)

Conclusion

Steps to learn typescript for reactjs :

I hope you found that interesting, informative, and entertaining. I would be more than happy to hear your remarks and thoughts about this solution in The comments.

If you think other people should read this post. Tweet,share and Follow me on Twitter for the next articles.