Hi again!
This week I have two new articles for you about how to get started with TypeScript and React.
I first heard about TypeScript when I was looking into Angular 2, which was a complete rewrite of the previous version using TypeScript.
Definition: TypeScript adds optional static typing to JavaScript.
When I first saw it, seeing types in JavaScript looked unnatural, and I kept sticking to vanilla JavaScript for a while.
Things have evolved a lot, and nowadays, TypeScript is more popular than ever. I’ve been working with it for the last three years and don’t want to miss it.
When working with plain JavaScript, I had a hard time remembering the parameters that each function accepts, and related errors were more common than I’d like to admit.
With TypeScript, the number of functions, parameters, and other things you need to keep in mind while programming is largely taken away by the autocompletion features. I rarely have to go to another file just to check how to use a given function or React component anymore.
What were the fields of that object again? TypeScript tells me everything I need to know without changing context. I’m currently moving my Gatsby blog to TypeScript.
React and TypeScript is close to a perfect match, and getting started is way easier than you might think. That’s why I wrote these two articles, which explain the first steps you need to take to set everything up and write your first components in TypeScript.
Getting started with React and TypeScript
In this article, I'll first explain how to configure TypeScript with the tsconfig
file. Afterward, we'll see how to set up an entire project using Webpack or Create React App.
The article also explains how to add TypeScript to existing projects.
How to create React components with TypeScript
Some people are afraid to move to TypeScript because they think it forces you to write a lot of boilerplate code. In my experience, once these people give TypeScript a try, they won't go back to writing Vanilla JavaScript again.
I want to take this fear from you by showing how you can easily define your React components with TypeScript in this article.
If you want to learn more about React and TypeScript, let me know by responding to this email.
Thanks for reading, and have a great week 💻
Felix
Sponsor
Asayer helps to quickly get to the root cause by reproducing issues as if they happened in your own browser. It also monitors your frontend performance by capturing key metrics such as time to interactive, page load time, memory consumption, and slow network requests as well as Redux, VueX, and NgRx actions/state.