Three advantages of using TypeScript in your React project
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.
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.
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.[ecko_annotated header=”The compiler will detect problems ” annotation=”and throw errors right away.”][/ecko_annotated]
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.
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.[ecko_annotated header=”While writing, ” annotation=”TypeScript will provide with the available options”][/ecko_annotated]
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.
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!