TypeScript Cookbook

Chapter 10. TypeScript and React

React is arguably one of the most popular JavaScript libraries in recent years. Its simple approach to the composition of components has changed the way we write frontend (and, to an extent, backend) applications, allowing you to declaratively write UI code using a JavaScript syntax extension called JSX. Not only was this simple principle easy to pick up and understand, but it also influenced dozens of other libraries.

JSX is undoubtedly a game changer in the JavaScript world, and with TypeScript’s goal to cater to all JavaScript developers, JSX found its way into TypeScript. In fact, TypeScript is a full-fledged JSX compiler. If you have no need for additional bundling or extra tooling, TypeScript is all you need to get your React app going. TypeScript is also immensely popular. At the time of writing, the React typings on NPM clocked 20 million downloads per week. The fantastic tooling with VS Code and the excellent types made TypeScript the first choice for React developers around the globe.

While TypeScript’s popularity among React developers continues unabated, one circumstance makes the use of TypeScript with React a bit difficult: TypeScript isn’t the React team’s first choice. While other JSX-based libraries are now mostly written in TypeScript and therefore provide excellent types out of the box, the React team works with their own static type-checker called Flow, which is similar to, but ultimately incompatible with, TypeScript. This ...