3 Benefits of Using TypeScript in React Project

As a developer in the React.js agency, I’ve been asked many times about the benefits of suing TypeScript in React projects, and this is why I decided to take the three most important ones, and share it with you.

TypeScript has grown significantly over the past two years. In the first quarter of 2019, it became one of the fastest growing languages and it sits at the top of languages compiled to JS.

This trend is clearly visible in the results of a The State of JavaScript survey. Among 20 000 of respondents, 80% are satisfied with TypeScript or interested in adding this JavaScript flavor to their skill stack.

More and more experienced developers share their experiences of creating and maintaining big projects built or migrated to TypeScript. Most of them say they are really satisfied with the results.

So, what makes TypeScript so attractive and beneficial that makes it worth to take the following risks:

• introducing a dependency to the project, that can be currently hyped up and soon gone
• spending the precious time of our devs that will be needed to let them learn TypeScript
• reducing the pool of available competent developers to be recruited

In this article, I will share with you, the three most appreciated advantages of TypeScript that are responsible for all the growing popularity of this technology.

P.S. We’ve created an article comparing TypeScript vs JavsScript

Compile-time validation

One of the great benefits of TypeScript is when writing React components with vanilla JavaScript, we used to rely on linters and prop-types to ensure code quality and catch bugs.

The main problem with PropTypes is that they operate during runtime. The longer the build process takes, the more you will have to wait to get the typechecking feedback. And let’s be honest: prototypes validation can be easily ignored/overlooked – it just a next console.log message.

The compiler will detect problems and throw errors right away.

On the other hand, TypeScript tells you what’s wrong before you can even run your program. The compiler will detect problems and throw errors right away. This will save you all the time spent waiting for the build process to complete and ensure that you actually address the problem.

How is this possible?

Thanks to interfaces, in TypeScript you can define complex type definitions. This is especially useful when you want to introduce complex types to your project. For example, objects that contain other defined types as properties. This allows TypeScript to support us with strict checks during compilation. That will let you catch most of the bugs before actually running the code.

In React, you can take advantage of Interfaces (or types) right away and use them for props and state definitions. TypeScript compilator will deliver (or ensure of that) all the necessary properties to the component. Later on, it will check that they have the correct types.

So, TypeScript’s static type system lets us catch bugs in React components faster and earlier.

Refined tools

The other benefit of TypeScript is when you will start writing TypeScript code, especially in Visual Studio Code, you will be pleased with better autocomplete, refactoring and snippet generation than with the vanilla JavaScript code.

This is possible because Intellisense (the intelligent code completion feature) has a far easier task when it can index code with a static type system of TypeScript. This way, available suggestions are more narrow and accurate.

While writing, TypeScript will provide with the available options

While you write, TypeScript will provide you with the available options. This saves a lot of your effort that you could spend on figuring out what should be written. It’s especially useful for new developers that reuse a component for the first time. TypeScript is able to provide them with a suggestion about what are props required, etc.

Refactoring is a lot easier as well. If we try to rename a component in a vanilla JS React app, VS Code can only rename references in an active file. If you run your project in TypeScript, you will enjoy updates of all references across the project codebase.

With TSLint, which provides us with a great set of rules for the React and TypeScript apps, we get additional checks on our code.

Why should you care?

Because all of those “out of the box” improvements will have a positive impact on your productivity and developer experience.

Better legibility, easier maintenance

Type definitions by themselves serve the reader as inline documentation. One of my favourite benefits of TypeScript is that code is more self-descriptive. That makes the process of understanding the code a lot easier.

Additionally, with TypeScript, you can generate high-quality documentation via tools like TSDoc which will always stay in sync with your source code.

So the more developers work on the project or/and the longer project will be maintained, the more you will gain from introducing TypeScript into the codebase. That’s why TypeScript day-by-day becomes the go-to choice for open-source software.

READ MORE

How to code faster? VS CODE SNIPPETS

VS Code Tricks – How to code faster?