Pagepro Blog

JavaScript

Three advantages of using TypeScript in your React project

Posted on .

Three advantages of using TypeScript in your React project

Introduction

TypeScript has grown significantly over the past two years. In the first quarter of 2019, it is 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 are 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 are really satisfied with the results.

So, what makes TypeScript so attractive 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.

Compile-time validation

When writing React components with vanilla JavaScript, we use 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 ensure that all of the necessary properties are delivered to the component and 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

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 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, which saves a lot of your effort that would be spent on figuring out what should be written. It’s especially useful for new developers that reuse a component for the first time, TypeScript will provide them with a suggestion about what are the props required, etc.

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

With TSLint, that 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. Code is more self-descriptive, which 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.

Summary

With the preceding three strengths, TypeScript proves to be a valuable option for all the big scale React projects. Have you already worked with TypeScript? Maybe you want to learn this technology in the near future? Or you don’t buy into all of this hype and stay skeptical about TS? Share your thoughts with me in the comments section!

Marcin Czarkowski

Marcin Czarkowski

Comments
  • user

    AUTHOR PatW

    Posted on 7:17 pm May 13, 2019.
    Reply

    Nice writeup! I just started using TS, and am excited about the self-documentation and intellisense 🙂

  • View Comments (1) ...
    Navigation