Jan
22
2013

TypeScript : Le complément au JavaScript

 TypeScript, jamais entendu parlé ? Normal... C'est un nouveau langage sorti il y a moins d'un an par Microsoft et créé par Anders Hejlsberg (le concepteur du Framework .Net). TypeScript est tout simplement une surcouche au JavaScript.

 Quelques points qui caractérisent TypeScript :

  •  Les fichiers sources sont des *.ts
  •  C'est un langage compilé => génère des *.js
  •  C'est gratuit et OpenSource
  •  IntelliSense pris en charge par Visual Studio

Vous allons voir maintenant les différentes fonctionnalités ajoutées par TypeScript :

 

Module.

Le mot-clé "module" permet de définir un espace de nom ou "namespace". Très pratique pour isoler des blocs de code qui n'ont pas de relation entre eux.

Par exemple :

module JCourbet.TypeScript.Intro {
     [...] 
}

 

Interface et classe.

Nous retrouvons la notion d'interface cher au Framework .Net ; pour rappel, c'est un objet abstrait permettant de définir un contrat qui doit être respecté par les classes l'implémentant. Pour l'objet classe, je ne vous ferai pas l'affront de vous l'expliquer... ;)

Par exemple :

// Interface
interface ICommunication {
    Parler(): string;
    Crier(): string;
    Chuchotter(): string;
}

class Personne implements ICommunication {
        Name: string;
        Prenom: string;
        Age: number;

        constructor(name: string, prenom: string, age: number) {
            this.Name = name;
            this.Prenom = prenom;
            this.Age = age;
        }

        Parler() {
            return "Blabla.";
        }

        Crier() {
            return "Blablaaaaa !!!";
        }

        Chuchotter() {
            return "Bla... Bla...";
        }
}

 

Fonction Lambda

Comme en C#, permet de définir plus rapidement une fonction et surtout de ne pas la nommer, comme par exemple pour calculer le carré d'un nombre :

class Nombre {
        LeCarre = (x: number) => x * x;
}

 

Typage fort.

En JavaScript pour déclarer une variable, nous avons l'habitude d'utiliser le mot clé "var". TypeScript introduit le typage fort sur les variables, c'est-à-dire de forcer le type de la variable : boolean, string, number. Je ne vous détaillerai pas ici les avantages du typage fort...

var UneVariableDeTypeString: string = "Une chaîne de caractères...";

 

Héritage

Et la dernière mais pas des moindres, l'héritage ! Dans la partie "Interface et classe", nous avons créé une classe Personne, grâce à l'héritage, et en particulier au mot clé "extends" nous pouvons créer une classe Homme et Femme :

export class Homme extends Personne {
        Sexe: string = "M";

        constructor(name: string, prenom: string, age: number) {
            super(name, prenom, age);
        }
    }

    export class Femme extends Personne {
        Sexe: string = "F";

        constructor(name: string, prenom: string, age: number) {
            super(name, prenom, age);
        }
    }

 

Dans le constructeur de la classe Homme ou Femme, il est nécessaire d'appeler le constructeur de base (constructeur de la classe Personne), nous utilisons pour cela le mot clé "super".

 

Pour terminer, je vais vous faire une différence entre le TypeScript et le JavaScript, vous allez voir la simplification que nous apporte TypeScript :

//TypeScript : 

interface ICommunication {
    Parler(): string;
    Crier(): string;
    Chuchotter(): string;
}

module JCourbet.TypeScript.Intro {
    export class Personne implements ICommunication {
        Name: string;
        Prenom: string;
        Age: number;

        constructor(name: string, prenom: string, age: number) {
            this.Name = name;
            this.Prenom = prenom;
            this.Age = age;
        }

        Parler() {
            return "Blabla.";
        }

        Crier() {
            return "Blablaaaaa !!!";
        }

        Chuchotter() {
            return "Bla... Bla...";
        }

        GetFullInformation() {
            return this.Name + " " + this.Prenom + " / " + this.Age;
        }

        LeCarre = (x: number) => x * x;
    }

    export class Homme extends Personne {
        Sexe: string = "M";

        constructor(name: string, prenom: string, age: number) {
            super(name, prenom, age);
        }
    }

    export class Femme extends Personne {
        Sexe: string = "F";

        constructor(name: string, prenom: string, age: number) {
            super(name, prenom, age);
        }
    }
}


// Local variables
var p1: ICommunication = new JCourbet.TypeScript.Intro.Personne('COURBET', 'Jérémy', 28);
alert(p1.Crier());

var p2 = new JCourbet.TypeScript.Intro.Personne("COURBET", "Jérémy", 28);
alert(p2.GetFullInformation());
alert(p2.LeCarre(34).toString());

var p3 = new JCourbet.TypeScript.Intro.Homme("COURBET", "Jérémy", 28);
alert(p3.Sexe);


 

//JavaScript : 

var __extends = this.__extends || function (d, b) {
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};
var JCourbet;
(function (JCourbet) {
    (function (TypeScript) {
        (function (Intro) {
            var Personne = (function () {
                function Personne(name, prenom, age) {
                    this.LeCarre = function (x) {
                        return x * x;
                    };
                    this.Name = name;
                    this.Prenom = prenom;
                    this.Age = age;
                }
                Personne.prototype.Parler = function () {
                    return "Blabla.";
                };
                Personne.prototype.Crier = function () {
                    return "Blablaaaaa !!!";
                };
                Personne.prototype.Chuchotter = function () {
                    return "Bla... Bla...";
                };
                Personne.prototype.GetFullInformation = function () {
                    return this.Name + " " + this.Prenom + " / " + this.Age;
                };
                return Personne;
            })();
            Intro.Personne = Personne;            
            var Homme = (function (_super) {
                __extends(Homme, _super);
                function Homme(name, prenom, age) {
                                _super.call(this, name, prenom, age);
                    this.Sexe = "M";
                }
                return Homme;
            })(Personne);
            Intro.Homme = Homme;            
            var Femme = (function (_super) {
                __extends(Femme, _super);
                function Femme(name, prenom, age) {
                                _super.call(this, name, prenom, age);
                    this.Sexe = "F";
                }
                return Femme;
            })(Personne);
            Intro.Femme = Femme;            
        })(TypeScript.Intro || (TypeScript.Intro = {}));
        var Intro = TypeScript.Intro;
    })(JCourbet.TypeScript || (JCourbet.TypeScript = {}));
    var TypeScript = JCourbet.TypeScript;
})(JCourbet || (JCourbet = {}));
var p1 = new JCourbet.TypeScript.Intro.Personne('COURBET', 'Jérémy', 28);
alert(p1.Crier());
var p2 = new JCourbet.TypeScript.Intro.Personne("COURBET", "Jérémy", 28);
alert(p2.GetFullInformation());
alert(p2.LeCarre(34).toString());
var p3 = new JCourbet.TypeScript.Intro.Homme("COURBET", "Jérémy", 28);
alert(p3.Sexe);
//@ sourceMappingURL=exempleClass.js.map

La conclusion tient en une phrase : TypeScript est du JavaScript orienté objet et vous simplifiera la vie ! :))

 

A propos de moi

Ingénieur de formation, je suis consultant .Net chez Avanade France.

Sur mon temps perso je suis développeur d'applications Windows Phone ; je suis aussi un inconditionnel de la BD XIII.

 J'espère que mes articles vous seront utiles, n'hésitez pas à les commenter ! Tongue out

Liste des articles

Mes Pages