Nowadays, it is impossible to imagine the web development process without frameworks like React, Vue.js, and Angular, which we talked about in our previous article. They spare developers from a variety of routine tasks, help to establish a base architecture strategy, and provide a basic framework for modern web application development.
Let’s find out why TypeScript is so great, and what disadvantages it has.
TypeScript is a programming language developed and maintained by Microsoft, first appearing in 2012. Anders Hejlsberg is considered a founder of TypeScript, and previously he was the lead architect of C# and creator of Delphi.
What is the biggest value of TypeScript?
The Advantages of TypeScript
Static code analysis
Code understanding improvement
Thanks to the statically typed nature of the language, the code becomes easier to read, which makes adding new software developers to a team easier. The compiler and Integrated Development Environment (IDE) will give an idea of which arguments the code accepts, what values it displays, how it manipulates external data, and many more.
Reducing the number of tests
Static typing also allows us to set the types of input and output values for a particular method, which reduces the necessity to create tests.
Here is an example. We have a function that accepts a row or a number as an argument, but not an array.
Here is what the minimal test for this function looks like:
With TypeScript we won’t need tests at all:
Making refactoring easier
Refactoring is a process aimed at improving the readability of the code and making it cleaner without changes in its functionality. With TypeScript, there are fewer risks in doing this, because the development environment will help to find the majority of code’s parts usages, will highlight changed classes, functions, and objects, and will alert on a compilation error, in case of imbalance after refactoring.
Modern development environments are very helpful during the development process. Usually, they have additional functions, navigation, for example. Navigation is for a quick transition to the definition of the variables or searching references for variables and autocomplete. Additionally, most IDEs find errors automatically and suggest changes and improvements. This helps to write code fast and improves the speed of the programmer’s work. TypeScript, in this case, helps IDE to understand your code.
The interaction with the Back-End
Let’s imagine that we need to exchange data with the Back-End. But how can we establish the format? Commonly, we have API doc for message types, but we do not want to refer to it every time we are using the API client method. The goal is to establish this format only once during the development of the API client. How can we find out what fields the “Post” object contains? TypeScript is here to help!
Here is a quick example. We will create a service for receiving posts, and we will use JSONplaceholder to achieve this goal. First, we will describe the type of our posts:
Next, to receive posts, we created the object with a method in a separate file. This method will receive as an argument the number of posts that we need, which means that its type is a number. The data that the method returns is a Promise with a type of array of posts.
To get the values of posts, we will create a function, which is calling out our method. We will put the number of posts we want to receive inside of it. Next, we write down the answer to our ‘list’ variable, which we also give the type of array of posts.
Finally, we call our function where we need it. For example, during the loading process of a page.
As a result, we determined the types of our requests and received results, as well as made them more predictable.
A decorator is a special type of description that can be connected to the class declaration, method, property, or parameter, and also it adds additional behavior to them. A lot of frameworks use decorators because they help to solve a wide variety of goals and help to make the code simpler to read and more convenient for programmers.
The system of types in TypeScript is so powerful because it allows expressing types through other types. Combining operators of different types, we can express complex operations and values in a convenient way. You can find more detailed information about this here.
Some disadvantages of TypeScript
Programmers have to learn a new language
The usage of third-party libraries
When using a third-party library, there has to be a declaration file that sometimes is not included by the library’s developer.
It is not a silver bullet
Handling Edge cases
After the team starts to rewrite its code on TS, there will be errors related to types, that code editor or other tools will show you. To get them out of your way and let you focus, at the early stages you can use the comment ‘// @ts-ignore’ or ‘// @ts-nocheck’. The comment ts-ignore is used for ignoring the errors of checking the types for the next row:
While comment ts-nocheck is used for ignoring checking errors through the entire document:
In TS code, we want to call those functions and the method:
In this case, we need to connect our declaration file my-module.d.ts, which will look like this:
TypeScript brings a lot of advantages in writing code thanks to typing. More and more instruments are using TypeScript, because the developers see a bright future in this programming language, with constant improvement and big support from the community. The products built with TypeScript are more reliable, stable, and scalable. However, keep in mind a few of its drawbacks.
Anyway, if you are a developer and never tried TypeScript, maybe it is the right time to add it to your project!
Table of contents:
Want to estimate your app idea?