Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Jeux web Discussion :

Développer son premier jeu Web (1/x)


Sujet :

Jeux web

  1. #1
    Rédacteur/Modérateur

    Développer son premier jeu Web (1/x)
    Mise en place de l'environnement de travail

    Prérequis :
    • Windows XP ou supérieur
    • 2,5 Go d'espace disque dur

    Sommaire :
    1. Introduction
    2. Choix du langage et de la plateforme
    3. Visual Studio Express 2012 for Web
    4. TypeScript
    5. Création du premier projet
    6. jQuery
    7. Git for Windows
    8. Personnalisation de Visual Studio
    9. L'alternative Notepad++
    10. Conclusion



    1. Introduction
    Quand on souhaite développer un jeu en tant qu'amateur, tout débute souvent par une idée originale ou simplement une envie venue à maturité qui nous pousse à franchir le pas et à nous lancer dans un projet de développement. Cependant, passée cette première étape, la réalité du concret reprend ses droits et on se pose fatalement de nombreuses questions : choix du langage, choix de la plateforme, choix des bibliothèques logicielles ou du moteur de jeux, etc. On peut se sentir assez facilement perdu, et à raison, tant ce n'est pas le manque d'innovations qui guettent l'industrie du logiciel de nos jours.

    C'est pourquoi, après avoir moi-même tâtonné longtemps à chercher des outils et des solutions, cet article se veut une petite introduction pour partir sur des bases suffisamment stables dans un projet de développement qui comportera suffisamment de problèmes pour ne pas perdre inutilement du temps sur des questions de simple organisation mais qui ont leur importance si elles ne sont pas prises en compte.


    2. Choix du langage et de la plateforme
    Choisir une technologie plutôt qu'une autre est toujours matière à débats et à controverses. Ici, nous ne chercherons pas à justifier par A+B les choix faits, l'important étant d'obtenir au final un jeu qui fonctionne dans un délai raisonnable.

    Nous opterons dans le cadre de cette discussion pour la plateforme Web, à savoir les principaux navigateurs du marché. Cela aura l'avantage d'avoir un jeu qui pourra tourner sur de nombreuses architectures techniques (Windows, Linux, Mac, Android, iOs, etc.) sans retoucher à la moindre ligne de code. Concernant le langage de nombreux choix sont possibles comme les moteurs de jeu tel Unity ou Unreal Engine, mais même si ces derniers sont reconnus actuellement dans le domaine des jeux vidéo, il n'en est pas de même dans l'industrie du logiciel prise dans son ensemble.

    Nous partirons du postulat que parmi les motivations à développer un jeu, on peut trouver celle de vouloir apprendre ou se perfectionner dans l'activité même du développement pour un usage généraliste. C'est la raison pour laquelle choisir un moteur de jeux propriétaire ne nous aidera pas forcément à acquérir des connaissances utiles dans le monde de l'entreprise, qui recherche plus des compétences sur l'informatique de gestion.

    Pour un jeu Web, si nous excluons donc les moteurs de jeux (et à fortiori les outils de création de jeux comme Game Maker ou RPG Maker) pour une raison de ré employabilité des connaissances ainsi apprises à travers un tel projet, un langage comme Javascript vient immédiatement à l'esprit, et à juste titre.

    Javascript qui a connu une montée en puissance ces dernières années grâce aux travaux de normalisations du HTML et des CSS, est actuellement la pierre angulaire du Web dynamique. Tout ou presque est possible avec Javascript. Pour s'en convaincre, j'invite les lecteurs à consulter le projet Epic Citadel et ce qui se fait autour des technologies Emscripten et Asm.js.

    Néanmoins, malgré un Javascript pratiquement incontournable dès qu'une application concerne le Web, il traîne encore l'héritage de son passé. Jadis conçu pour apporter une petite dose d'intelligence à des sites Web sous la forme de quelques lignes de codes, ce sont aujourd'hui des applications de plusieurs dizaines, voire centaines de milliers de lignes qui sont écrites en Javascript. Ce qui pose quelques problèmes de débogage à cause entre autre de son typage dynamique et aussi des problèmes d'architecture logicielle par l'absence de réelle notion de Programmation Orientée Objet, remplacée dans Javascript par la notion puissante de prototype, mais néanmoins différente.

    Ceci étant dit, même si notre projet ne sera pas un monstre d'ingénierie logicielle, il y a fort à parier qu'il dépassera la dizaine de milliers de lignes de code (en comptant les commentaires). Ce qui risque de poser un petit souci de confiance envers le code produit ainsi que des dizaines et des dizaines d'heures perdues à debugger une erreur qui aurait été détectée à la compilation dans un langage de type C/C++.

    Il existe actuellement deux principales alternatives intéressantes au Javascript pur qui sont CoffeScript et TypeScript. Ce sont tous deux des langages qui permettent de compiler le code source, typé et orienté objet, vers du Javascript, permettant ainsi de retomber sur nos pieds avec un code résultant en Javascript, interprétable sur tous les navigateurs.

    Sans rentrer dans une guerre de religion pour l'un ou pour l'autre, nous choisirons ici le langage TypeScript qui est certes un peu moins mature que CoffeScript, mais a pour avantage d'être un sur-ensemble de Javascript (autrement dit, du code Javascript natif est directement reconnu sous TypeScript, ce qui n'est pas le cas de CoffeScript). C'est également un projet Open Source dont le code est accessible à tous, et enfin il a été créé par le papa de C# qui travaille chez Microsoft ce qui est un gage de sérieux quoiqu'on en dise.

    Le principal défaut de TypeScript est sa relative jeunesse, puisque le langage est toujours au stade de développement, même si une version de production est prévue d'ici la fin de l'année, ce qui restreint à l'heure actuelle les outils prenant en charge ce nouveau langage qui reste néanmoins promis à se pérenniser.

    Pour tirer pleinement parti des possibilités de ce langage, papa de C# oblige, il nous faudra installer Visual Studio si vous ne l'avez pas déjà.


    3. Visual Studio Express 2012 for Web

    Visual Studio est un environnement de développement intégré (IDE) très populaire mis au point par Microsoft qui supporte nativement les principaux langages de l'éditeur (C#, ASP, J#) ainsi que le Javascript. Ce logiciel est payant et relativement onéreux pour une activité en amateur, mais heureusement il existe une version gratuite, Visual Studio Express, qui est cependant bridée avec notamment une restriction à un seul langage et une limitation dans l'ajout de modules complémentaires. Malgré tout, cela sera amplement suffisant pour nos besoins.

    Il est recommandé de faire attention à bien télécharger la version anglaise et non pas française de Visual Studio, du fait d'un bug sur la localisation de la dernière version de TypeScript 0.9.1.

    Téléchargez Visual Studio Express 2012 for Web - English

    Ceci téléchargera l'image ISO de Visual Studio Express 2012 for Web - English, et pour lancer l'installation proprement dire, il vous faudra soit graver sur un CD ou bien utiliser un logiciel de virtualisation tel Virtual Clone Drive dont on pourra trouver des tutoriels sur la toile tel que celui-ci.

    A noter aussi que l'installation nécessite plus de 2 Go d'espace libre sur votre disque dur.

    Laissez-vous guider par la procédure d'installation, simple mais assez longue, en restant sur les choix par défaut.


    4. TypeScript

    Une fois Visual Studio Express 2012 for Web installé, ainsi que les mises à jour de base et l'obtention d'une clé d'enregistrement pour usage privé, nous pouvons installer TypeScript.

    Pour rappel, TypeScript est un langage fortement typé avec une syntaxe orientée-objet plus conventionnelle que celle du Javascript, et qui permet de générer au final du Javascript afin d'être interprété par tous les navigateurs.

    L'avantage de ce langage réside en partie sur le fait que c'est un sur-ensemble du Javascript et ce qui lui permet d'accepter nativement n'importe quel code Javascript.

    Téléchargez le plugin TypeScript 0.9.1 pour Visual Studio

    A noter que si vous avez installé une version différente que la version anglaise de Visual Studio Express 2012 for Web, alors le plugin de TypeScript ne fonctionnera pas.


    5. Création du premier projet

    Armés désormais de Visual Studio et de son plugin TypeScript, nous voilà prêt pour créer notre projet dans l'outil de développement.

    Il faut tout d'abord savoir que Visual Studio fait une distinction logique entre la notion globale de solution et celle de projets qui sont des composants d'une solution. Tout au long de ce guide, le mot projet en italique, désignera la notion spécifique à Visual Studio, tandis que le mot projet sans mise en forme en italique désignera la définition du langage courant, à savoir développer un jeu vidéo. La notion de solution est pour le moment facultative, car étant surtout nécessaire dans le cadre de grandes applications d'entreprise.

    Pour créer un projet, cliquez sur le menu FILE > New Project, ou bien appuyez sur CTRL + MAJ + N. Une fenêtre de dialogue telle que ci-dessous devrait apparaître :


    Puis saisissez les informations nécessaires dans les champs suivants :
    Projet : PremierJeuVideo
    Location : C:/Users/VotreCompte/Dev

    Si vous n'avez pas de sous-répertoire Dev dans votre répertoire utilisateur dédié, je suppose que vous ne vous êtes pas connecté en Administrateur, alors Visual Studio le créera pour vous.

    Veillez aussi à ce que l'option Create directory for solution soit décoché afin d'éviter de rajouter un niveau d'arborescence inutile.

    Une fois la fenêtre de création de projet validée, vous pouvez ignorer la fenêtre suivante à propos du Team Foundation Server. Cela peut être éventuellement utile dans le cadre d'un projet en équipe, mais je suppose aussi que vous réalisez votre projet en solo.

    Nous allons maintenant mettre en place une arborescence type qui nous permettra de ranger les multiples fichiers qui seront impliqués pour ce projet. Le but est au final d'obtenir l'arborescence minimale suivante :
    Code auto:0 :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    PremierJeuVideo
      \-- art
      |     \-- interface
      |     \-- sounds
      +-- doc
      |     \-- private
      |     \-- public
      \-- lib
      \-- src
      \-- tools

    Voici un rapide descriptif des répertoires de cette arborescence :
    • art : ensemble des éléments artistiques du projet
    • art/interface : ensemble des éléments d'interface utilisateur
    • art/sounds : musiques et bruitages
    • doc : documentation du projet
    • doc/private : documentation interne
    • doc/public : documentation utilisateur
    • lib : bibliothèques Javascript personnalisée
    • src : sous-projets contenant les fichiers sources
    • tools : utilitaires divers facilitant la gestion du projet

    Il est entendu que cette arborescence n'est pas complète. Elle sera complétée au fil des développements, notamment le répertoire "src" pour le moment vide.

    La création de cette arborescence peut se faire à travers le panneau Solution Explorer qui devrait apparaître par défaut à droite.


    A l'aide d'un clic droit sur l'élément PremierJeuVideo désignant la racine du projet, un menu contextuel devrait apparaître où vous pouvez choisir l'option Add > New Folder. De cette façon vous pourrez créer simplement l'arborescence du projet au sein de Visual Studio.


    6. jQuery

    S'il y a un framework incontournable pour qui veut développer en Javascript, c'est bien jQuery développé et maintenu par Google.

    Néanmoins, pour l'intégrer à nos développements TypeScript, il convient de générer un fichier d'interfaçage pour TypeScript afin que le compilateur puisse vérifier le typage de votre code utilisant jQuery.

    Pour récupérer en local le framework jQuery ainsi que le fichier d'interfaçage TypeScript, c'est très simple, il suffit d'utiliser le module NuGet intégré à Visual Studio. Pour cela, dans le panneau Solution Explorer comme dans le paragraphe précédent, cliquez droit sur l'élément racine du projet PremierJeuVideo puis cliquez sur l'option Manage NuGet Packages.

    Après une phase de chargement, voici le type d'écran qui devrait s'afficher :


    Le package jQuery devrait arriver en tête de liste. Si ce n'est pas le cas, vous pouvez le rechercher à l'aide de la zone de recherche en haut à droite. Cliquez sur le bouton Install.

    En l'état, jQuery est opérationnel pour qui veut programmer en Javascript, mais comme dit précédemment, il a besoin d'un complément pour que TypeScript puisse l'exploiter.

    Dans le champ de saisie de recherche en haut à droite, tapez : jquery.Typescript.DefinitelyTyped

    Puis cliquez sur le bouton Install sur l'élément correspondant à notre recherche (en principe le premier) dans la zone principale de la fenêtre

    A l'issue de cette étape, nous venons d'installer avec succès jQuery pour TypeScript.


    7. Git for Windows

    Un cycle de développement n'est jamais linéaire et gérer manuellement les versions de ses fichiers sources quand ceux-ci se multiplient peut se révéler un véritable casse-tête.

    Pour répondre à ce problème aussi ancien que la programmation, les développeurs ont mis au point des outils pour gérer les modifications apportées aux fichiers sources. Il en existe de nombreux qui se regroupent sous l'appellation CVS (Control Version System). Nous utiliserons l'un d'entre eux qui se nomme Git for Windows qui a l'avantage d'être simple à utiliser et compatible avec la solution d'hébergement de sources en ligne GitHub.

    Téléchargez Git for Windows

    Lors de l'installation, il est recommandé de laisser toutes les options par défaut.

    Une fois installé, nous allons indiquer à Git d'utiliser le répertoire de la solution précédemment créée avec Visual Studio en cliquant sur l'option Créer un nouveau dépôt.

    Dans la zone de saisie, tapez le répertoire du projet que vous avez créé avec Visual Studio précédemment : C:/Users/VotreCompte/Dev/PremierJeuVideo


    Indiquons maintenant à Git de suivre les modifications de tous les fichiers du projet en les sélectionnant tout d'abord :
    1. mettre en surbrillance le tout premier élément de la liste en haut à gauche,
    2. faire défiler l'ascenseur pour parvenir tout en bas,
    3. maintenir la touche MAJ et cliquer sur le dernier élément.

    Une fois tous les fichiers sélectionnés, nous pouvons en demander l'indexation de trois façons :
    • En sélectionner dans le menu Commit > Indexer
    • En cliquant sur le bouton Indexer modifs.
    • En tapant sur CTRL + T.


    Si une boite de dialogue apparaît pour avertir qu'un nombre important de fichiers sont sur le point d'être indexés, ignorez-là simplement et poursuivez.

    Si une boite de dialogue apparaît pour vous demander de réaliser une conversion de retour chariot, accepter la conversion en cliquant sur le bouton Continuer.

    Désormais, tous les fichiers qui se trouvaient dans le panneau des Modifs non indexées en haut à gauche, devraient apparaitre maintenant dans le panneau des Modifs indexées (pour commit) en bas à gauche.

    Dans la zone de saisie inférieure, correspondant à la description de vos modifications, tapons le texte "Initialisation", et cliquons sur le bouton Commiter.

    Nous venons ainsi de créer le dépôt de suivi des changements de notre projet dans Git ce qui sera très utile lorsque vous souhaiterez revenir sur une ou plusieurs modifications malencontreuses.

    Nous pouvons apporter un petit raffinement à notre suivi des changements dans la mesure où certains fichiers sont générés et modifiés automatiquement par Visual Studio comme les fichiers internes de Visual Studio pour gérer le projet, ou bien les fichiers de travail qui seront générés lors des compilations. A l'aide d'un éditeur de texte, dans le répertoire du projet, ici en l'occurrence C:\Users\VotreCompte\Dev\PremierJeuVideo\, créez un fichier dénommé .gitignore avec le contenu suivant :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .gitignore:
    pakages.config
    *.csproj
    *.csproj.user
    *.sln
    *.suo
    bin/
    obj/



    8. Personnalisation de Visual Studio

    Visual Studio y compris dans son édition Express est un outil très puissant. Néanmoins, cela ne l'exonère pas de quelques lacunes qu'il est possible de combler à l'aide d'outils externes.

    Il sera par exemple utile de pouvoir compiler indépendamment du reste du projet un seul fichier TypeScript, notamment pour des raisons de rapidité. Tout comme il peut être intéressant d'appeler Git for Windows sans quitter Visual Studio.

    On peut rajouter un appel à ces deux outils simplement en cliquant sur le menu TOOLS > External Tools.


    Si vous avez laissé les options par défaut durant l'installation de ces deux outils, voici les paramètres à saisir pour ces deux outils.

    Paramètres pour TypeScript
    • Title: TypeScript
    • Command: C:\Program Files\Microsoft SDKs\TypeScript\tsc.exe
    • Arguments: $(ItemPath)
    • Initial directory: $(ItemDir)

    Paramètres pour Git for Windows
    • Title: Git for Windows
    • Command: C:\Program Files\Git\bin\wish.exe
    • Arguments: "C:\Program Files\Git\libexec\git-core\git-gui"
    • Initial directory: $(SolutionDir)



    9. L'alternative Notepad++

    Si vous êtes allergique à Visual Studio et sa consommation de mémoire vive de plusieurs centaines de Mo, vous pouvez vous rabattre sur des éditeurs plus simples et moins gourmands en ressources machine.

    Si vous êtes sur le système d'exploitation Windows, il existe une solution open source qui a fait ses preuves : Notepad++

    En plus d'être à la base un éditeur de texte très puissant, il s'est vu rajouter de nombreuses fonctionnalités au fil du temps faisant de lui un outsider non négligeable par rapport à des solutions commerciales dans le domaine du développement logiciel.

    Même si vous ne comptez pas programmer votre jeu avec Notepad++, je vous recommande néanmoins de l'installer pour tous les services qu'il pourra vous rendre comme la conversion des fichiers en UTF8 et ses plugins de formatage de fichiers XML.

    Téléchargez Notepad++

    Une fois Notepad++ installé puis lancé, configurons-le pour en faire un environnement TypeScript friendly.

    Encodage
    Le compilateur TypeScript dans sa version 0.9 n'accepte plus que les fichiers encodés en UTF-8. Pour éviter de se retrouver devant de mystérieuses erreurs d'inclusion de fichiers, activons d'emblée le mode UTF-8 par défaut. Pour cela, cliquez sur le menu Paramétrage > Préférences > Nouveau document. Sélectionnez la troisième option, UTF-8.

    Auto complétion
    L'auto complétion est une fonction dans un environnement de développement qui permet d'accélérer sensiblement la saisie à partir des premiers caractères en se basant sur l'ensemble des variables, des fonctions et autres identificateurs déjà déclarés dans le projet, tout en filtrant les possibilités en fonction du contexte de la saisie (eg. seuls les attributs de l'objet courant seront pris en compte).

    Notepad ne permet pas d'aller jusqu'à ce raffinement, mais permet tout de même de proposer une liste de l'ensemble des mots déjà présent dans un fichier source. Pour activer cette possibilité, il faut cliquer sur le menu Paramétrage > Préférences > Auto complétion, puis sélectionnez les options suivantes :
    • Activer la complétion automatique > Complétion de mot
    • Paramètres affichés durant la saisie
    • A partir du 2 è caractère


    Coloration syntaxique
    Bien qu'il n'existe pas à ma connaissance de fichier de définition de coloration syntaxique pour TypeScript, nous pouvons utiliser une possibilité bien pratique offerte par Notepad++, à savoir la possibilité d'étendre la coloration syntaxique d'un langage déjà défini.

    Pour cela cliquez sur le menu Paramétrage > Configurateur de coloration syntaxique.



    Tout d'abord, vous pouvez si vous le souhaitez changer ici le thème de votre éditeur. Certains développeurs préfèrent non sans raison un fond moins vif que le blanc brillant par défaut, mais cela reste avant tout une histoire de goûts personnels.

    Dans la première liste de gauche, recherchez et sélectionnez l'élément Javascript.
    Dans la deuxième liste, sélectionnez l'élément KEYWORD.

    Dans la zone de saisie en bas dénommée Ext. utilisateur, saisissez ts qui est l'extension des fichiers TypeScript.

    Enfin, dans la zone de saisie tout à droite dénommée Mots-clés utilisateur, saisissez les uns à la suite des autres, les mots suivants :
    any boolean class constructor declare enum export extends implements import interface module number public private require static string super

    Il existe de nombreux plugins pour Notepad++. Parmi eux, deux seront indispensables à notre situation :
    • NppExec
    • XML Tools


    Pour vérifier si ces deux plugins sont installés ou non, il suffit de cliquer sur le menu Compléments et de rechercher ces deux noms. Si au moins l'un des deux manque à l'appel, pas de souci, l'installation d'un plugin est très simple grâce à un autre plugin qui est livré par défaut avec l'outil, à savoir Plugin Manager qu'on peut retrouver également dans ce menu Compléments.

    Plugin Manager un petit module qui permet de rechercher l'ensemble des plugins disponibles et de les installer. C'est en quelque sorte l'équivalent de NuGet sous Visual Studio.

    Une fois ces deux plugins d'installés, et surtout NppExec, nous pourrons définir les commandes prédéfinies suivantes :
    • TypeScript
    • Git for Windows


    La procédure de définition est identique pour ces trois commandes, seule le script d'exécution varie. Cette procédure est la suivante :
    1. Cliquez sur le menu Compléments > NppExec > Execute, ou appuyer sur la touche F6.
    2. Dans la zone de saisie, tapez le script de la commande
    3. Cliquer sur le bouton Save
    4. Donner un nom à votre commande
    5. Cliquez sur le menu Compléments > NppExec > Advanced Options. Dans la boite de dialogue qui s'affiche, seule la zone Menu Item est vraiment importante.
    6. Dans le champ de saisie Item name, taper le nom de votre commande.
    7. Dans le menu déroulant Associated script qui se trouve juste en dessous, choisissez la commande souhaitée puis valider en cliquant sur le bouton OK.


    Script de commande TypeScript
    cd "$(CURRENT_DIRECTORY)"
    tsc.exe "$(FILE_NAME)"

    Script de commande Git for Windows
    "C:\Program Files\Git\bin\wish.exe" "C:\Program Files\Git\libexec\git-core\git-gui"

    Après, rien ne vous empêche d'ajouter les commandes de votre choix comme make/jake, node.js et bien d'autres, mais cela dépasserait sans doute le cadre de cet article.


    10. Conclusion

    Comme nous venons de le voir, l'installation d'un environnement de développement en TypeScript n'est pas très compliquée, mais n'est pas si triviale non plus lorsqu'on démarre de rien, ce qui est souvent le cas quand on débute dans le développement.

    Tout ce qui est décrit dans cet article est absolument facultatif. En effet, il est tout à fait possible de réaliser un projet sans mettre en place toute cette logistique, mais tôt ou tard, à mesure de la complexification de l'application, le besoin d'organisation se fera ressentir, et il sera plus difficile d'y remettre de l'ordre à postériori que de partir sur de bonnes bases.

    En espérant que cet article vous sera utile.
    Tutoriels et FAQ TypeScript

  2. #2
    Rédacteur/Modérateur

    Introduction au langage TypeScript
    Introduction au langage TypeScript

    Prérequis :
    • Connaissance des principes de bases de la programmation orientée objet
    • Connaissance des principes de bases de Javascript
    • Compilateur TypeScript installé

    (0.1)

    Sommaire :
    • Introduction
    • Typage
    • Classe
    • Fonction anonyme fléchée
    • Modularité
    • Conclusion

    (0.2)

    1. Introduction
    Cet article est une présentation succincte des principaux apports de TypeScript que sont le typage, les classes, les fonctions anonymes "fléchées" et la modularité. L'installation proprement dite du compilateur TypeScript est décrite dans l'article suivant : Développer son premier jeu Web (partie 1).

    Il convient également de rappeler que le langage TypeScript est avant tout du Javascript amélioré ce qui permet la réutilisation de ses connaissances en Javascript. Il faut néanmoins avoir conscience que les limitations intrinsèques de Javascript reflètent également dans TypeScript. Par exemple, la notion de d'attributs privés d'une classe qui existe dans la plupart des langages orientés objets, bien que syntaxiquement présente dans TypeScript, n'est pas restrictive mais uniquement indicative dans la mesure où un attribut privé pourra malgré tout être utilisé en dehors de sa classe.

    La spécification complète du langage TypeScript est disponible sur le site officiel.


    2. Typage

    Le principal apport du langage TypeScript, celui qui justifie le nom même du langage, est la possibilité d'associer, facultativement, un type à une donnée.

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var pi: number;
    var message: string;
    var flag: boolean;
    var joker: any;

    (2.1)

    Dans l'exemple ci-dessus, quatre variables sont déclarées sans être initialisées à l'aide d'un type dont la signification est explicite.
    • La variable pi a pour type number, un nombre entier ou flottant.
    • La variable message a pour type string, une chaine de caractères.
    • La variable flag a pour type boolean, un booléen qui peut prendre la valeur true ou false.
    • La variable joker a pour type any, qui est le type par défaut qu'attribut TypeScript à une variable s'il ne parvient pas à déterminer son type lors de sa déclaration.

    (2.2)

    Bien entendu, il est possible d'initialiser une variable au moment de sa déclaration comme on peut le voir ci-dessous.
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var pi: number = 3.14;
    var message: string = "Bonjour !";
    var flag: boolean = true;
    var joker: any = null;

    (2.3)

    Bien que la mention explicite du type soit recommandée, en l'absence de celui-ci lors de la première initialisation d'une variable, TypeScript en infère automatiquement le type.

    A noter que TypeScript, contrairement à Javascript, peut ainsi être considéré comme un langage à typage statique.


    3. Classe

    La notion de classe introduite dans TypeScript anticipe la prochaine évolution de Javascript (ECMAScript 6).
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    class Greeter {
        element: HTMLElement;
        span: HTMLElement;
        timerToken: number;
     
        constructor(element: HTMLElement) {
            this.element = element;
            this.element.innerHTML += "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.innerHTML = new Date().toUTCString(), 500);
        }
     
        stop() {
            clearTimeout(this.timerToken);
        }
     
    }
     
    window.onload = () => {
        var el = document.getElementById('content');
        var greeter = new Greeter(el);
        greeter.start();
    };

    (3.1)

    Comme on peut le voir dans l'exemple ci-dessus, une classe Greeter y est définie d'une façon proche de la plupart des langages orientés objet.

    La classe Greeter possède ici trois attributs (element, span et timerToken), défini un constructeur (constructor) et deux méthodes (start et stop). Son instanciation se fait à l'aide de l'opérateur new comme on peut le voir à la fin de l'exemple précédent.
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    var greeter = new Greeter(el);

    (3.2)
    De pair avec la notion de classe, TypeScript implémente la notion d'héritage simple par l'utilisation du mot-clé extends.
    L'extension de la classe Greeter de l'exemple précédent pourrait se faire ainsi :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    class GreeterId extends Greeter {
      id: string;
      constructor(element: HTMLElement, id: string) {
        super(element);
     
        this.id = id;
      }
    }

    (3.3)

    Cette nouvelle classe GreeterId se contente d'ajouter un nouvel attribut id à la classe Greeter.

    Toutes les classes définies dans TypeScript peuvent ensuite être considérées comme des nouveaux types.


    4. Fonction anonyme fléchée

    Un autre apport notable de TypeScript à Javascript est sa nouvelle manière de définir une fonction anonyme. Comme celle présente à l'intérieur de la méthode start en paramètre à l'appel de setInterval et qui peut être dénommée ici notation "fléchée" (arrow function).
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    this.timerToken = setInterval(() => this.span.innerHTML = new Date().toUTCString(), 500);

    (4.1)

    L'avantage par rapport à l'actuelle norme de Javascript (ECMAScript 5), est que la notation fléchée ne change pas la valeur de contexte du mot-clé this à l'intérieur de la fonction anonyme. Cela évite donc l'utilisation d'une variable intermédiaire servant à propager la valeur de this à l'intérieur de la fonction anonyme. Par exemple, la ligne de code précédente aurait pu être transcrite ainsi en Javascript actuel :
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var _this = this;
    this.timerToken = setInterval(function () {
        return _this.span.innerHTML = new Date().toUTCString();
    }, 500);

    (4.2)

    Cette la nouvelle notation plus concise sera utile en particulier pour les fonctions callback.


    5. Modularité

    TypeScript introduit de nouvelles techniques de modularisation devenues nécessaires par le typage statique et par l'héritage de classes.
    Parmi ces techniques de modularisation, le référencement d'un fichier TypeScript externe est peut-être la plus simple.
    Elle consiste à ajouter en tout début de fichier, le source TypeScript externe contenant des déclarations nécessaire au compilateur afin qu'il en déduise entre autre les types et les héritages.
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    /// <reference path="Externe.ts"/>

    (5.1)

    A noter que cela ressemble un peu aux #include des langages C/C++.


    6. Conclusion

    Cette présentation est évidemment loin d'être complète. Pour se familiariser avec TypeScript, il peut être utile d'utiliser la page de test afin de voir instantanément la conversion d'un code TypeScript en un code Javascript. Sinon, la spécification, malheureusement non traduite en français, reste indispensable pour approfondir le sujet.

    En espérant que cet article vous aura été utile.
    Tutoriels et FAQ TypeScript