L’histoire n’est t’elle qu’un éternel recommencement ?

C’est le sentiment que j’ai eu en voyant le TypeScript de Microsoft débarquer. De la même manière que l’action script 1 ( basé sur la même norme que JavaScript aka Ecma ) s’est vite vu limité pour le développement d’applications ambitieuses, Adobe avait fait évoluer le langage (en 2006 je crois) vers l’action script 2.

Ce nouveau langage apportait un nouveau cadre pour écrire son code où l’on avait accès à du typage strict, un système de classe, les mot clef extends, implements etc.
Le tout était ensuite retranscrit automatiquement en action script 1.
Avec TypeScript c’est exactement le même principe, c’est une surcouche et produit du javascript en output.

 

Voilà un start guide pour faire du TypeScript

( Il y a aussi un plugin pour SublimeText, mais a coté de visual studio il n’y a pas photo )

Puis qu’on parle de photos, voici un screenshot, avec un petit troll au passage puisque si c’est chrome qui est votre navigateur par défaut c’est lui qui apparaît dans la combo box.

code TypeScript

class Greeter {
    element: HTMLElement;
    span: HTMLElement;
    timerToken: number;
    
    constructor (element: HTMLElement) { 
        this.element = element;
        this.element.innerHTML += "Il est : ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerHTML = new Date().toUTCString();
    }

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

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

}

window.onload = () => {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

NOTE : utiliser innerHTML plutôt que innerText ce dernier n’est pas supporté par FireFox

code javascript généré

var Greeter = (function () {
    function Greeter(element) {
        this.element = element;
        this.element.innerHTML += "Il est : ";
        this.span = document.createElement('span');
        this.element.appendChild(this.span);
        this.span.innerHTML = new Date().toUTCString();
    }
    Greeter.prototype.start = function () {
        var _this = this;
        this.timerToken = setInterval(function () {
            return _this.span.innerHTML = new Date().toUTCString();
        }, 500);
    };
    Greeter.prototype.stop = function () {
        clearTimeout(this.timerToken);
    };
    return Greeter;
})();
window.onload = function () {
    var el = document.getElementById('content');
    var greeter = new Greeter(el);
    greeter.start();
};

Quelques remarque sur visual studio

  • (+) bonne intellisense
  • (+) un debugger
  • (+) la version express est gratuite
  • (-) le projet explorer est bidon
  • (-) aucune prise en charge des fichiers css
  • (-) on doit inclure à la main les fichiers js dans le html
  • (-) pèse + de 500 MO …

Maintenant que c’est bon au niveau ‘tooling’, le parfait petit guide typescript for action script developer