TypeScript the evolution of JavaScript

By Nov 22, 2017

Description:

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.

Preferencesoft

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 manipulate directly the DOM objects etc.

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

Because of that some developers consider that JavaScript is not a serious language.

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.

Compilation

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>

Example
Hello.ts
document.body.innerHTML = "Hello World";

We execute the command: tsc Hello.ts.

Page.html
<!DOCTYPE html>
<html>
    <head>
        <title>TypeScript</title>
    </head>
    <body>
        <script src="hello.js"></script>

</html>

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

Hello.js
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:

Hello2.ts
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:

Hello2.js
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 EDI 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: typescriptlang.org/samples.


TypeScript

Categories

Share

Follow


KodFor Privacy Policy