TypeScript the evolution of JavaScript

By   Calendar icon Nov 22, 2017   Level 1 icon


Here we present the TypeScript language of Microsoft, which is an evolution of the JavaScript language. It is designed as a superset of JavaScript and adds some features.


Tags: TypeScript

Here we present the TypeScript language of Microsoft, which is an evolution of the JavaScript language. It is designed as a superset of JavaScript and adds some features.

JavaScript flaws

Currently, JavaScript language is the only language supported by all the most common browsers and allowing to execute code in the Internet pages.

It allows to process events of the UI in the browser, to directly manipulate the DOM objects etc.

JavaScript language has a rather peculiar design that makes it, in some respects, quite unique, but has the major disadvantage of being weakly typed.

Weak typing does not allow developers to avoid type mismatches when writing a program. For example, a comparison between a table and a number indicates a flaw in the logic of the program and is likely to produce an inconsistent result at runtime.
It will therefore be difficult in JavaScript to detect this kind of error before executing the program. It is estimated that with a strongly typed language, between 10% and 30% of errors are avoided.

Another more secondary defect is that it does not have a feature-class object.

It makes it difficult to manage large projects.

To solve these problems, Microsoft has decided to extend the JavaScript language, creating the TypeScript language. But TypeScript does not replace JavaScript in browsers, it is implemented with a compiler to JavaScript (i.e. a trans-compiler to JavaScript).

The official website of the TypeScript gives a lot of information on the language.


It is not possible to include TypeScript code in an HTML page. But we can easily do without this practice. Thus, the programs are written in TypeScript in .ts files, they are compiled to JavaScript with the command tsc. A JavaScript file is generated and in the HTML file, a link is inserted to the JavaScript file like:

<script src="example.js"></script>



document.body.innerHTML = "Hello World";

We execute the command: tsc Hello.ts.


<!DOCTYPE html>
        <script src="hello.js"></script>


Out of curiosity, here is the contents of the compiled .js file:


document.body.innerHTML = "Hello World";
//# sourceMappingURL=hello.js.map

There are not many differences between the source file and the compiled file.

But differences occur when the TypeScript code contains class declarations as in the following example:


class Hello {
    _name: string;
    constructor(name: string) {
        this._name = name;
    getMessage() {
        return "Hello " + this._name + "!";

let hello = new Hello("John");
document.body.innerHTML = hello.getMessage();

The result in JavaScript:


var Hello = (function () {
    function Hello(name) {
        this._name = name;
    Hello.prototype.getMessage = function () {
        return "Hello " + this._name + "!";
    return Hello;
var hello = new Hello("John");
document.body.innerHTML = hello.getMessage();
//# sourceMappingURL=hello2.js.map

Tools to develop in TypeScript

All you need is the tsc compiler, which you can download from the official website: typescriptlang.org

It can be configured with a tsconfig.json file.

To work with TypeScript, it is better to use an IDE like Visual Studio that allows you to easily edit files and automate the compilation.

Note that a number of important JavaScript libraries such as React, Angular, Vue, ... have already been converted to TypeScript. Please see the following page: