Next I will explain what benefits you may expect when using TypeScript in React applications.
1. Catch problems earlier
Static typing in TypeScript helps catch possible type errors, missing parameters and props before execution. If a React component’s prop type is changed, for example from number to string, TypeScript compiler will inform about all objects that need updating. When using an IDE, such as Visual Studio Code, the compiler will report these errors as the code is typed.
2. Better IDE support
IDEs benefit a lot from TypeScript’s typed nature. When writing TypeScript with a good IDE, the IDE is able to provide better code suggestions, more specific information about symbols and function signatures, and so on. Personally, I use VSCode for TypeScript. With VSCode, you’ll get features like this:
- Useful code snippets that are suggested as you type.
- Auto imports: automatically find symbols and add imports for them as you type.
- Hover information on TypeScript symbols to quickly see their type information and relevant documentation.
- Information about the function signature when writing function calls.
- Code suggestions. Also with React components; For example props and their types will be suggested as you type.
- Refactoring helpers, such as function and constant extraction and renaming of symbols.
With a good IDE and TypeScript, the coding process can speed up a lot. It’s also easier for new developers to join the project when they know what types of parameters a function takes in or what props a React component requires without having to look at the function or the component.
3. More self-documenting code
With TypeScript, code becomes more self-documenting and more readable on its own. Just by looking at the “ProgressProps” interface, you can tell Progress component’s required props, optional props and their types.
4. Create-react-app supports it out of the box
With create-react-app, you can create React applications with minimal build configuration. TypeScript support was officially implemented in create-react-app version 2.1, and creating an app with TypeScript is now just as simple as running the
npx create-react-app app-name command with a
-–typescript -flag. TypeScript support in create-react-app is the main reason I switched to TypeScript.
Downsides of using TypeScript
TypeScript is an overhead. It definitely increases the amount of code, and depending on developers’ opinions and experience, this might be a bad thing. Writing generic code with TypeScript’s static type system can make the code more complicated than understandable, and because of that, very generic code should be avoided with TypeScript. It also adds an additional build step for compilation which can increase build times. However, with create-react-app, the build times at least in my projects have stayed in control.
Other solutions for the typing problem
Flow, unlike TypeScript, is not a programming language; It is a static type checker. Flow’s type checks can be written in comments or in the code itself. However if the type information is written in comments, it will be separated from the code, and if the type checks are written in the code itself, it will require a compilation step like with TypeScript. Also because TypeScript is a programming language, it has better IDE support and a larger community behind it.
Prop-types originally existed in React package, but it was moved to a different package in React v15.5, so when used, it’s now an additional dependency. Prop-types provide type checking for React component’s prop types only, so you can’t use them to check, for example, types of utility functions in the project. Because of this you need to use another type checker in the project if you want type checking elsewhere.
Many of these solutions are just partial solutions. In my opinion, it’s best to go for the full solution instead, in which case TypeScript would probably be the best choice.
npx create-react-app command with the