This is the language to bet on right now! Created by Microsoft in 2012 with the aim of improving and making JavaScript development safer, it is today a fundamental element for the web developer. TypeScript is a language intended to be compiled into JavaScript.
The fact that TypeScript is a more strongly typed language than JavaScript makes it possible to detect a whole series of bugs at compile time. It allows us to create applications with a genuine structure and very high-quality tooling. But its real strength is that it can be compiled from any operating system, to any version of JavaScript, making it compatible with the majority of browsers. Here is a case study to help you become familiar with TypeScript.
How do you install TypeScript?
The simplest way to install TypeScript is via the NPM package manager. To do so, enter the following command in your terminal:npm install -g typescript
Once installed, all you have to do is create a TypeScript file in your project (application, site, etc.) and add your tsconfig.json configuration file to it.
The basic tsconfig.json file was shown here as a CodePen (pen YjdJPj by Aaron, @leox47).
This is the basic file. It is also possible to customise it with numerous properties. You will find them easily on the official website.
An example of building something with TypeScript
In the example below, we created a module for loading SVG files asynchronously directly into the DOM. Loading SVGs asynchronously makes it possible to load the DOM faster (and therefore to optimise web performance), but above all to be able to modify them using CSS.
Let’s go! Let’s start by creating our object.
The object’s source code was shown here as a CodePen (pen OwrapW by Aaron, @leox47).
First of all, take a good look at the code and compare it with a basic block of JavaScript code. You will see a big difference in terms of structuring, and above all you will notice some interesting features.
For example, the first element (Interface) makes it possible to restrict the data type of a set of parameters. Here it corresponds to the configuration of our object. Instead of creating several blocks of checking code, you can do away with them altogether by typing your variables (string / number / Array / boolean / etc.). Another notable difference is that we can use a genuine object structure with private, static or public parameters and methods.
Our object has now been created, so it is time to use it! If it is used incorrectly, TypeScript will not compile our code into JavaScript, which will save us a lot of errors.
The usage example was shown here as a CodePen (pen KBbrmQ by Aaron, @leox47).
Once again, a few elements caught our attention: for example the use of the static method, which makes it possible to target an object directly without instantiating it. Or other methods that can only be used when an object is instantiated, such as destroy().
If you would like to know more about what’s new in TypeScript, version 3.0 was released at the end of July! You can discover its new features on the official site.
We take an interest in every facet of JavaScript, and in particular in the frameworks dedicated to it. More articles on web development are coming very soon on our blog.
