Introduction à TypeScript

Une fois ce projet créé, celui-ci contient un fichier CSS, un fichier HTML, et un fichier TypeScript d’extension .ts.

Si on regarde de plus près ce fichier contient un code divisé en deux fenêtres comme on peut l’avoir avec le designer HTML et le code HTML dans Visual Studio. On y retrouve à gauche le code TypeScript, et à droite le code Javascript associé. On va donc essayer de comprendre comment celui-ci fonctionne.

Voici le code de la classe Greeter avec TypeScript :

    class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;

    constructor (element: HTMLElement) {
    this.element = element;
    this.element.innerText += "The time is: ";
    this.span = document.createElement('span');
    this.element.appendChild(this.span);
    this.span.innerText = new Date().toUTCString();
    }

    start() {
    this.timerToken = setInterval(() => this.span.innerText = new Date().toUTCString(), 500);
    }

    stop() {
    clearTimeout(this.timerToken);
    }
    }
    

On y voit donc une classe avec trois propriétés, un constructeur et deux méthodes. Ce que l’on peut apercevoir c’est que les propriétés sont typées, ce qui est une notion nouvelle en javascript, ainsi que les notions de classes et de constructeur déclarées de cette façon.

Voyons maintenant le code Javascript généré par ce code TypeScript :

var Greeter = (function () {
    function Greeter(element) {
        this.element = element;
        this.element.innerText += "The time is: ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerText = new Date().toUTCString();
    }
    Greeter.prototype.start = function () {
        var _this = this;
        this.timerToken = setInterval(function () {
            return _this.span.innerText = new Date().toUTCString();
        }, 500);
    };
    Greeter.prototype.stop = function () {
        clearTimeout(this.timerToken);
    };
    return Greeter;
})();
    

Il nous génère donc un objet Greeter qui est une fonction avec closure, qui contient elle-même une fonction et deux prototypes start et stop.

On a donc un code plus clair pour les développeurs non habitués à faire du JavaScript, cela devient donc plus naturel pour nous. Il est à noter, qu’il existe à ce jour des frameworks permettant de générer du JavaScript grâce à un code plus lisible tel que CoffeeScript.

Le principal intérêt que je vois à TypeScript est qu’il apporte un typage fort à JavaScript qui selon moi est trop permissif et cela peut engendrer pleins d’erreurs.

Ainsi si je crée ce fichier TypeScript :

class MyClass {

    mySumMethod(a: number, b: number) {
        return a + b;
    }
}

window.onload = () => {
    var tc = new MyClass();
    var result = tc.mySumMethod(40, 2);
};
    

Lorsque je compile mon application, je n’ai aucun problème, cependant si je remplace un paramètre de ma méthode par une chaîne de caractères, le compilateur me dit que j’ai fait une erreur, il ne va donc pas régénérer le JavaScript associé.