Up until last year, my only experience with TypeScript was people on Twitter either arguing which overly complex solution is the best or hating about how slow the compiler is. I had been using ReasonML and ReScript for almost 6 years (thanks Sean (new tab)), and was more than happy with that. Yet, TypeScript gained in popularity and eventually my previous team at Carla also wanted to use it for our React application.
So here I was, frightened of all the wizardry I had seen on Twitter and biased towards the beauty of a functional programming language with a proper type system. I wanted to bridge all of the good stuff over and rather explore different design pattern than opting for overly complex solutions.
Today, I use TypeScript on a daily basis and actually like it quite a bit, even though I still regularly break the compiler. One thing that took me quite some time though, was figuring out the best way to add TypeScript to all the different React patterns and features. I've seen it done in so many ways ending up confused by all the different types the library itself provides.
To help you avoid that struggle and/or to improve your existing React codebase, this article explores different use cases and the - in my opinion - most elegant solutions.
The article is into four main sections: components, state management, refs and events. Feel free to jump around however you want.