Introduction à TypeScript

En ce début du mois d’octobre, Anders Hejlsberg a publié une vidéo sur Channel 9 pour introduire un nouveau langage de programmation qui permet de faire du JavaScript fortement typé, et qui abstrait les syntaxes complexes que les développeurs .Net ne maîtrisent pas toujours forcément en JavaScript. Ce langage a donc pour but de faciliter le développement cross-platform, et améliorera la scalabilité des applications. Nous allons donc voir dans cet article comment utiliser ce nouveau langage de programmation.

L’installation de Type Script

Il existe, à ce jour, 2 moyens de l’installer, soit via NuGet, soit via ce lien qui vous donnera un installeur pour Visual Studio, il vous faudra aller par la suite dans C:\Program Files (x86)\Microsoft SDKs\TypeScript\0.8.0.0\ afin d’installer le bon VSIX pour votre Visual Studio.

L’avantage de ce plugin pour Visual Studio est qu’il vous fournit un template par défaut qui utilise TypeScript afin que vous puissiez faire vos tests. Mais à mon sens rien ne vaut NuGet pour les gros projets surtout si ceux si sont développés à plusieurs.

Création d’un nouveau projet

Après l’installation du package pour Visual Studio, un nouveau type de template est donc apparu, on peut désormais créer des projets HTML avec Type Script, comme on peut le voir ci-dessous.

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é.

Il est bien entendu possible d’ajouter des frameworks existants à TypeScript, comme JQuery, ou JQueryUI. De plus, il est déjà disponible pour les applications WinJs pour Windows 8.

Nous verrons dans un autre article comment le coupler à du Node.js pour allier la puissance de ces deux technologies.

Nombre de vue : 211

COMMENTAIRES 1 commentaire

  1. […] un précédent article je vous ai présenté la dernière nouveauté de Microsoft, à savoir TypeScript . Pour résumer, TypeScript est un moyen de développer des programmes en JavaScript à […]

AJOUTER UN COMMENTAIRE