Introduction to TypeScript, a JavaScript With Syntax For Types

Introduction

 

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. 

It is a common practice, that Front-End development is conducted with JavaScript, with rare cases of using exotic programming languages like Dart. However, JavaScript, as a programming language, has a lot of issues we should recognize. 

One of those issues is the fact that JavaScript is a dynamically typed language. This means, that we can easily change the type of variable, assigning it another type. Furthermore, the definition of ‘type’ is very simplified here, as you can’t rely on the type of the received values. While it works for scalar types, for more complicated logic the issues arise. For example, when you need to ensure that a certain object has some methods or properties, you need to write a lot of additional ‘boilerplate’ code to achieve this. 

Inevitably, this issue leads to errors during the software development process, which could be found only when the application is running. To prevent this, and other JavaScript issues, Microsoft engineers developed TypeScript, a JavaScript With Syntax For Types.

Let’s find out why TypeScript is so great, and what disadvantages it has.  

History

 

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.

The rising complexity in application development led to the creation of TypeScript, which became popular due to its flexibility and productivity. Soon, some parts of TypeScript became a JavaScript standard and frameworks like Angular and Vue 3 were written in their entirety on TypeScript.

What is the biggest value of TypeScript?

It solves the most impactful issue of JavaScript, that the error can be detected only during the execution of the code. This issue is very important because it leads to numerous bugs appearing in the application and ultimately harms any business that uses the application. TypeScript is built to detect errors during the code compilation stage. 

The Advantages of TypeScript

Static code analysis

The main purpose of the TypeScript compiler is to manage low-level mechanics of the code type checking process and convert it to valid JavaScript code. The compiler uses static code analysis to reduce the number of errors during the execution. Errors in code or delivering the wrong type of argument in a function will trigger the compiler to alarm that something went wrong before code execution. This is extremely valuable because even with the fullest set of tests, logical errors and some other events can lead to program malfunction during the execution. 

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. 

IDE support

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.typicode.com  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. 

Backward compatibility with JavaScript

TypeScript can use parts of the code written on JavaScript. Due to this fact, TypeScript can be integrated gradually, by changing the most critical parts. With TypeScript programmers can replace the legacy code with a new one iteratively without any roadblocks. 

Decorators 

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. 

Advanced types

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 www.typescriptlang.org/docs/handbook/2/typeof-types.html .  

Some disadvantages of TypeScript

Programmers have to learn a new language

There are developers that are not interested in learning TypeScript and are comfortable settling for JavaScript. The teams that use JS, become productive with TS after 2-3 months approximately and can use TS to the fullest extent after 6 months. So, training of the employees can become a major blocker. Most importantly, learning TypeScript requires paradigm change, from dynamic programming to type-based programming.

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. 

Compiler

TypeScript needs compiling, while JavaScript does not. Before usage, TS must be transformed to JS. 

It is not a silver bullet

TypeScript may give you a false sense of security and a feeling that you can't face something unexpected. The truth is, that you should not trust it entirely. TypeScript is only checking types during the compiling process, after that, we deal with JavaScript that doesn’t do that. This means that we still could face errors that the compiler didn’t find. 

Handling Edge cases

 

Right now, there is a big number of projects written on JS, that is still being supported and developed. What the team of developers needs to do in order to use TS for those projects, and is there any way to use TypeScript and JavaScript simultaneously? The good news is, that TypeScript has everything to help minimize the transition from JS to TS. Here are some examples: 

Ignore

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:

JavaScript interoperability

It provides us the ability to use JavaScript parts inside TypeScript code.

Declaration files

We mentioned them previously in the article, but let’s add some more context. Declaration files are used to provide TypeScript the information about the type of API written on JavaScript. 

For example, you use something like jQuery or any existing library on JavaScript and you want to use it in your TypeScript code. Instead of rewriting jQuery on TypeScript, all you have to do is to write d.ts file, that contains information about the interface of the library. You will get the advantages of the static type check while using the JS library. Here is an example. We have a certain JS module with some functions and variables being described:

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: 

Conclusion

 

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!