PROGRAMMATION ORIENTEE OBJET ET EVENEMENTIELLE EN TYPESCRIPT

Ce document explique comment utiliser le langage TypeScript pour développer des programmes dynamiques et interactifs, comme des animations ou des jeux, pouvant être intégrés directement dans des pages Web. TypeScript est une surcouche à JavaScript qui permet de palier à certains manques comme la programmation orientée objet et le typage statique des variables. Le code TypeScript est ensuite traduit en JavaScript, ce qui garantit la portabilité des applications dans potentiellement n'importe quel navigateur. Ce document est destiné à des personnes qui ne sont pas forcément spécialistes de la programmation, mais qui ont toutefois déjà programmé.

Comme TypeScript est une surcouche à JavaScript, les bases du langage restent les mêmes, il peut donc être intéressant de commencer par le cours de . Outre la présentation du langage TypeScript, ce document introduit quelques éléments de programmation orientée objet, et la notion d'événement indispensable pour la conception d'une interface utilisateur. La manipulation des balises d'un document HTML via le langage TypeScript, en contrôlant notamment ses propriétés de style CSS, est détaillée afin de montrer comment développer des interfaces dynamiques et interactives.

Voici un bref résumé de chacun des chapitres de ce document. Ils sont présentés sous la forme d'un diaporama qui, je l'espère, sera assez explicite.

• 
  Rappelle comment JavaScript permet la conception de documents HTML interactifs et dynamiques, et explique ensuite les avantages à utiliser la surcouche TypeScript.

• 
  Présente le langage TypeScript: déclaration de variables, manipulation des tableaux et des chaînes de caractères, définition de fonctions...

• 
  Introduit les concepts de la programmation orientée objet et la syntaxe associée en langage TypeScript pour définir des classes, ainsi que des relations d'héritage et d'agrégation.

• 
  Explique la solution retenue en TypeScript pour interagir avec des balises HTML, et en particulier modifier leurs propriétés de style CSS, pour les contrôler.

• 
  Introduit les mécanismes permettant la gestion des événements en TypeScript, et donc l'interaction avec l'utilisateur.

Pour mener à bien la conception d'une application interactive avec TypeScript, nous proposons ici un squelette de projet qui contient une classe Sprite permettant de faire abstraction du code JavaScript permettant de contrôler une balise HTML, une classe Scene (qui hérite de Sprite) pour représenter la zone visible de l'application, et un modèle de page HTML qui embarque l'application.

• scene.htm
  Modèle de page HTML dans laquelle l'application est intégrée. La balise HTML qui contient le visuel de l'application est appelée ici la "scène". A cette balise est associé un objet de la classe Scene: en contrôlant cet objet, on contrôle la balise de la scène.

• Scene.ts
  Code TypeScript de la classe Scene. Ce fichier est le point de départ de l'application: dans le constructeur de la scène, on crée les éléments centraux de l'application; dans la méthode demarrer, on écrit le code de lancement de l'application; et dans la méthode arreter, on écrit le code de terminaison de l'application.

• Sprite.ts
  Code TypeScript de la classe Sprite. Chaque fois qu'une balise HTML doit être manipulée, on lui associe un objet Sprite qui devient l'unique interlocuteur pour la contrôler. Cette classe est proposée pour simplifier nos développements en masquant les détails d'accès à une balise (code généralement fastidieux pour consulter ou modifier les propriétés de style de la balise). Bien qu'incomplète, une partie des fonctionnalités de cette classe est présentée dans les deux derniers chapitres de ce document.

Vous pouvez télécharger le avec tous les fichiers présentés ici. Il est conçu pour être compilé avec le paquet TypeScript de Node.js. La commande pour la compilation, à lancer à partir du dossier du projet, est la suivante:  tsc -p tsconfig.json.