Roope Tapaninen
03.04.2019 · Roope Tapaninen

Why to use TypeScript in React development

Speed up your next React project with TypeScript.

React has been one of the most popular JavaScript frameworks in web development for a few years already. React applications are usually developed with just plain JavaScript. I did that, too, before I tried TypeScript. After developing with TypeScript for about 4 months, I now prefer TypeScript over plain JavaScript in any new React project.

 

TypeScript is a superset of JavaScript that compiles to plain JavaScript. It was published in October 2012 and is developed and maintained by Microsoft. TypeScript adds some useful features like static typing, interfaces, enums and generics to JavaScript. Because TypeScript is a superset of JavaScript, existing JavaScript programs also work as TypeScript programs.

 

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.

 

Using TypeScript instead of JavaScript enables IDEs to provide a better environment for spotting common errors as the code is typed. TypeScript compiler gives detailed information about missing or invalid properties in React components.

 

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.

 

Many of these work with JavaScript too, but TypeScript provides additional type information when possible.

 

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 types, enums, interfaces, types for functions` parameters and their return types, etc. the code becomes more predictable and easier to understand for other developers. You can still write it like you would write normal JavaScript alongside TypeScript’s features. TypeScript has support for many modern JavaScript features, such as object destructuring and async/await.

 

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

Like every technology, TypeScript has its downsides too. After all, it is a superset of JavaScript and it tries to hide the bad parts of JavaScript. This can give new developers or developers from traditional object-oriented languages a false feeling of safety, when the actual code being executed is still JavaScript with no type checks. Type errors may still occur, for example, when fetching data from a REST API. If type checks are needed during runtime they need to be implemented separately, or with a library like io-ts.

 

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

There are other solutions trying to tackle the same typing problem, for example Flow, JSDoc and Prop-types.

 

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.

 

JSDoc is used a lot in JavaScript projects. With it you can create documentation for functions and their parameters, which IDEs such as VSCode can use to show relevant information. However, with JSDoc you’ll have the type information on top of the function instead of next to the parameter with TypeScript. Also React’s support for JSDoc is not that good, and prop-types are needed to check types of React component’s props.

 

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.

 

Wrap up

All in all, TypeScript results in faster development since bugs are surfaced during compilation instead of runtime. Also when developing React applications with tools like hot reloading, catching errors before the application hot reloads gives you significant speed benefits. IDE support is better with TypeScript compared to JavaScript, and also, code is easier to understand and more predictive.

 

There are some downsides with TypeScript, and developers need to understand the concepts of JavaScript before they can truly understand TypeScript. Depending on the project and the experience of the developers, the trade-offs might not be worth it. However, if you know the concepts of JavaScript or have experience with TypeScript, I recommend to try running the next npx create-react-app command with the -–typescript -flag.

 

Sources:


TypeScript
React
Visual Studio Code
TypeScript in Visual Studio Code
Create-react-app
Flow documentation
JSDoc documentation
Prop-types documentation
 

Kategoria
Teknologia

Haluatko tietää lisää aiheesta? Jätä tietosi, niin otamme yhteyttä.

Viimeisimmät blogikirjoitukset