Favorite TypeScript Resources
Tags: frontend, webdev, typescript
Published: 2022-12-20 21:40:47

---
title: Favorite TypeScript Resources
published: true
description: A list of resources for learning TypeScript
tags: frontend, webdev, typescript
canonical_url: https://sheelahb.com/blog/favorite-typescript-resources
cover_image: https://sheelahb.com/static/81b4d464cf933dc0014ac664a41d81a8/5d2fb/typescript-resources.jpg
type: post
---

TypeScript has become a mainstay in a lot of open source projects these days, and it's also a "preferred skill" in many web development and front-end engineering job posts.

I started learning TypeScript a couple years ago, when i started a new job on a design systems engineering team with a entire codebase written entirely in TypeScript. I remember worrying about being impossibly slow at building new components because of my lack of TypeScript experience.

In the end, it wasn't that bad, as I had teammates point me in the direction of some useful TypeScript learning resources, and I've found some more great ones since then. I will say that having the opportunity to learn TypeScript while working on a team is probably the best scenario. You will at times get stuck on something with a cryptic TypeScript error, and having someone at work to pair with when you're stuck is invaluable.

Here's some TypeScript learning resources that have been helpful for me.

## Base Resources

These are some useful base resources to get your started.

- [TypeScript Deep Dive][2] (free): A great overall reference. If you prefer learning via videos, the author, Basarat, has a lot of [YouTube videos][3] available as well.
- [TypeScript in 50 Lessons][4] (paid): I learned all the TypeScript fundamentals from this book. I love that it's broken up into bite-size lessons, so you can learn a little bit at a time. Also, the examples use real-world scenarios, so they're easier to follow.
- [TypeScript Docs][7] (free): A great starter resource to learn terminology, so that you can do a web search with the right words :)
- [TypeScript Fundamentals, v3][5] (paid): If you like learning by watching video courses and you have access to Frontend Masters, this is a great course. I took the v2 one but this is an updated version which will cover all the latest TypeScript features. Mike North is a solid instructor. If you are interested in learning how to convert an existing JavaScript project to TypeScript, check out the [v2][6] version of this course.
- [Kent C. Dodds Blog][9]: Kent C. Dodds has a fair number of blog posts about TypeScript that are useful as well.

## React & TypeScript Resources

There are a lot of best practices that exist for using TypeScript in React projects. I highly recommend checking some of these out if you're using React and are new to TypeScript.

- [React TypeScript Cheat Sheet][8] (free): This is my go-to React & TypeScript resource. This covers the basic best practices for doing things like creating components, creating types for React component props, etc. Even the TypeScript documentation links to this site, so you know it's a good one.
- [TypeScript for React Developers][10] (free): This FreeCodeCamp course covers all the fundamentals.

## Bonus: TypeScript Error Message Decoder

The error messages given by the TypeScript compiler can be very hard to understand. To help with this, try this awesome [VS Code Total Typescript plugin][1]. You won't regret it!


Featured image by [Kimberly Farmer](https://unsplash.com/@kimberlyfarmer) via Unsplash

[1]: https://marketplace.visualstudio.com/items?itemName=mattpocock.ts-error-translator
[2]: https://basarat.gitbook.io/typescript
[3]: https://www.youtube.com/@basarat/videos
[4]: https://www.smashingmagazine.com/printed-books/typescript-in-50-lessons
[5]: https://frontendmasters.com/courses/typescript-v3
[6]: https://frontendmasters.com/courses/typescript-v2
[7]: https://www.typescriptlang.org/docs
[8]: https://react-typescript-cheatsheet.netlify.app
[9]: https://kentcdodds.com/blog?q=typescript
[10]: https://www.freecodecamp.org/news/typescript-for-react-developers