Epsilon_GT_v8_Mise en page 1 20/07/2015 15:45 Page 29 Développement d applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS Préface Avant de commencer Préparation des outils et création du projet Architecture d'une application web Création d'api REST JavaScript moderne Single Page applications TypeScript Web apps adaptatives Intégration continue Les tests Déploiement et suivi en production Les nouvelles API d'html5 Évolution des standards et rétrocompatibilité ISSN 1960-3444 ISBN 978-2-7460-9715-5 9 782746 097155 54 Développeur Web depuis un peu plus de 10 ans et.net depuis 5 ans, Philippe DIDIERGEORGES a suivi la transformation du web intervenue depuis les années 2000. Dès sa découverte de Team Foundation Sever, en version 2010 à l'époque, il s'intéresse immédiatement à sa mise en œuvre dans le cadre de projets développés dans le respect des méthodologies agiles. Au quotidien, il participe à des projets de grande envergure sur les dernières technologies liées au web dans un environnement de travail Microsoft et anime régulièrement des conférences sur les salons professionnels. Cette volonté de partager ses connaissances et son retour d expérience sur la gestion du cycle de vie d une application et les technologies web motive ses nombreuses participations à divers blogs et forums et a trouvé une continuité naturelle dans l'écriture de ce livre. Plus d informations : Sur www.editions-eni.fr : b L'API REST avec ASP.NET 5 MVC 6 b L'application avec AngularJS en JavaScript, en TypeScript b Le style de l'application responsive avec CSS et LESS b Des exemples fonctionnels des API HTML5 les plus avancées HTML5 Développement Web HTML5 d applications Visual Studio 2015 et TFS Les chapitres du livre Développement d applications Web Ce livre s adresse à tout développeur, chef de projet ou directeur technique amené à travailler sur le développement d applications web HTML5 avec Visual Studio 2015 et Team Foundation Server. Le lecteur est guidé depuis l écriture du code côté serveur et client, en passant par la création des tests, jusqu à la mise en production. L auteur tient compte des problématiques inhérentes au développement en équipe et propose des solutions afin d assurer une agilité et une qualité de code optimale. Une connaissance des bases du langage C#, des concepts de la programmation orientée objet ainsi que des technologies du web est un prérequis indispensable pour tirer pleinement profit de ce livre. Dans un premier temps, le lecteur est guidé sur la mise en place de l environnement technique de développement et la planification du projet. Place au code ensuite avec la création d'une API REST JSON avec ASP.NET 5 MVC 6 associé à Entity Framework 7. Le chapitre dédié au JavaScript présente un ensemble de recommandations, de bonnes pratiques et de modèles de programmation à mettre en œuvre pour produire un code performant, propre et facile à maintenir. Les chapitres suivants ouvrent la voie au développement d applications monopages (Single Page Applications), l auteur propose de réaliser une application AngularJS complètement fonctionnelle. Le lecteur découvrira ensuite le langage TypeScript, sa syntaxe, ses concepts, pour développer des applications complexes tout en conservant les qualités qui ont fait la popularité du JavaScript. Le chapitre sur les web apps adaptatives plonge le développeur au sein des nouvelles techniques qu il doit maîtriser pour adapter ses interfaces aux divers terminaux aujourd hui connectés (Responsive web design). Après le développement proprement dit, l auteur présente les outils de Visual Studio et Team Foundation Server pour créer et industrialiser les tests sous toutes leurs formes. Le lecteur est ensuite guidé dans la création d un processus de Build d intégration continue, suivi tout naturellement de la configuration pour mettre en place le déploiement continu. Ensuite, l auteur détaille comment mettre en place le service Application Insights afin de suivre la disponibilité et l utilisation des applications web. Enfin, c est dans les derniers chapitres que vous trouverez une sélection d API HTML5 particulièrement intéressantes pour vous permettre de proposer des interactions toujours plus riches et de prendre dès aujourd hui la vague du web de demain. Des éléments complémentaires sont en téléchargement sur le site www.editions-eni.fr. L art et la manière avec Visual Studio 2015 et TFS Préface d Étienne MARGRAFF Évangéliste HTML5, JavaScript et mobilité Microsoft France Téléchargement www.editions-eni.fr.fr Philippe DIDIERGEORGES
Table des matières 1 Les éléments à télécharger sont disponibles à l'adresse suivante : http://www.editions-eni.fr Saisissez la référence de l'ouvrage EP5HTVS dans la zone de recherche et validez. Cliquez sur le titre du livre puis sur le bouton de téléchargement. Préface Chapitre 1 Avant de commencer 1. Introduction............................................. 15 2. HTML5 oui, mais pas que................................... 15 2.1 HTML5............................................. 16 2.2 JavaScript........................................... 17 2.3 CSS................................................ 18 3. Les outils................................................ 18 Chapitre 2 Préparation des outils et création du projet 1. Introduction............................................. 21 2. Team Foundation Server................................... 21 2.1 Visual Studio ALM.................................... 21 2.2 Les services de TFS.................................... 22 2.2.1 Planning....................................... 22 2.2.2 Contrôle des sources............................. 23 2.2.3 Éléments de travail.............................. 24 2.2.4 Automatisation de la build........................ 25 2.2.5 Tests et Lab Management......................... 26 2.2.6 Rapports et analyse.............................. 27 2.3 Visual Studio Online ou serveur dédié.................... 27
2 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 3. Démarrage du projet...................................... 29 3.1 Création d'un compte Visual Studio Online............... 29 3.2 Création du projet d'équipe............................. 31 3.3 Team Web Access..................................... 34 3.3.1 Gestion de l'équipe et droits d'accès................. 35 3.3.2 Les Work Items.................................. 37 3.3.3 Le Product Backlog............................... 38 3.3.4 Gestion des versions et du planning................. 43 4. Visual Studio............................................. 48 4.1 Création du projet.................................... 52 4.1.1 Connexion à TFS et configuration de l'espace de travail............................. 52 4.1.2 Connexion à un projet avec Team Foundation Version Control............. 57 4.1.3 Création du projet et premier archivage de code....... 60 4.2 Team Explorer....................................... 64 4.2.1 Gestion des branches............................. 65 4.2.2 Les requêtes d'éléments de travail................... 68 5. Les plug-ins indispensables................................. 70 5.1 Web Essentials....................................... 71 5.2 Chutzpah........................................... 71 5.3 Extension GitHub pour Visual Studio.................... 71 Chapitre 3 Architecture d'une application web 1. Introduction............................................. 73 2. Qu'est-ce qu'une web app?................................. 73 3. Les approches possibles.................................... 74 3.1 Fonctionnement de l'architecture monopage.............. 74 3.2 Le site web seul...................................... 75 3.3 L'API et ses apps...................................... 75
Table des matières 3 3.4 XML et JSON........................................ 76 4. Applications JavaScript ou hybrides client-serveur.............. 78 4.1 L'application hybride client-serveur...................... 78 4.2 L'application JavaScript................................ 79 4.3 Comment choisir?.................................... 79 Chapitre 4 Création d'api REST 1. Introduction............................................. 81 2. Présentation de REST...................................... 81 3. ASP.NET ou Node.js?..................................... 82 3.1 ASP.NET MVC....................................... 82 3.2 Node.js.............................................. 83 3.3 Lequel choisir?....................................... 83 4. Le projet ASP.NET 5...................................... 84 4.1 Création du projet.................................... 84 4.2 Organisation du projet................................ 87 4.3 Configuration de MVC 6 et Entity Framework 7........... 88 4.3.1 Ajout des dépendances........................... 88 4.3.2 Ajout du fichier de configuration................... 92 4.3.3 Configuration d'asp.net MVC................... 93 5. Entity Framework 7....................................... 95 5.1 Création des modèles.................................. 95 5.2 Création du contexte de base de données.................. 98 5.3 Création du Repository................................ 99 5.4 Configuration des migrations avec DNVM............... 104 6. Création de la WebAPI................................... 107 6.1 Création des contrôleurs.............................. 107 6.1.1 Les méthodes GET.............................. 108 6.1.2 Ajout des méthodes POST, PUT et DELETE......... 109 6.2 Gestion des erreurs................................... 111
4 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 6.3 Tester avec Fiddler................................... 112 6.4 Concepts avancés................................... 116 6.4.1 Objets de transfert de données.................... 116 6.4.2 Asynchronisme................................ 117 Chapitre 5 JavaScript moderne 1. Introduction............................................ 121 2. Conventions de code JavaScript............................ 122 2.1 Style.............................................. 122 2.1.1 Indentation................................... 122 2.1.2 Terminaison de ligne............................ 123 2.1.3 Opérations sur plusieurs lignes.................... 124 2.1.4 Variables...................................... 125 2.1.5 Fonctions...................................... 127 2.1.6 Comparateurs d'égalité........................... 129 2.1.7 Boucles et expressions booléennes.................. 130 2.1.8 Commentaires................................. 132 2.2 Conventions de nommage............................ 133 2.2.1 Variables et constantes........................... 133 2.2.2 Fonctions...................................... 134 2.2.3 Classes et constructeurs.......................... 135 2.3 Les pièges à éviter................................... 135 2.3.1 null et undefined............................... 135 2.3.2 eval()......................................... 136 3. Les patterns de base à connaître............................ 137 3.1 Les classes.......................................... 137 3.2 L'héritage........................................... 139 3.3 Les membres publics, privés et privilégiés................ 140 3.3.1 Publics........................................ 140 3.3.2 Privés......................................... 140 3.3.3 Méthodes privilégiées............................ 141
Table des matières 5 3.4 Les fonctions anonymes à invocation immédiate.......... 142 3.5 Les modules........................................ 144 3.5.1 Le pattern Module.............................. 144 3.5.2 Le pattern Façade............................... 146 3.5.3 Gestion des dépendances avec AMD............... 147 3.6 Les callbacks........................................ 148 4. Les bonnes pratiques..................................... 150 4.1 Le mode strict...................................... 150 4.2 Erreurs personnalisées................................ 153 4.3 Documentation du code.............................. 154 5. Les outils............................................... 155 5.1 JSHint............................................. 155 5.1.1 Introduction................................... 155 5.1.2 Configuration................................. 157 5.1.3 Déclaration d'exceptions......................... 158 5.2 Outils pour le développeur intégrés au navigateur......... 159 5.3 Vorlon.JS........................................... 162 Chapitre 6 Single Page Applications 1. Introduction............................................ 165 2. Choisir un framework.................................... 165 3. AngularJS.............................................. 166 3.1 Introduction........................................ 166 3.2 Une application AngularJS simple...................... 167 3.2.1 Configuration du dossier wwwroot................ 167 3.2.2 Premier exemple de code AngularJS................ 168 3.3 Un exemple plus avancé.............................. 171 3.3.1 Création du premier module...................... 171 3.3.2 Un premier contrôleur........................... 173 3.3.3 L'injection de dépendances........................ 175
6 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 3.3.4 Le scope....................................... 176 3.3.5 Les directives................................... 179 3.3.6 Conventions et style............................ 183 3.3.7 Filtres, services, providers, factories................ 184 4. Développement de la web app............................. 184 4.1 Préparation du projet................................. 184 4.1.1 package.json................................... 185 4.1.2 bower.json..................................... 186 4.1.3 Gruntfile.js.................................... 188 4.2 Création de l'application Angular....................... 192 4.2.1 Création du conteneur de l'application............. 192 4.2.2 Organisation des sources......................... 197 4.2.3 Gestion des routes.............................. 198 4.2.4 Création des contrôleurs......................... 199 4.2.5 Création des vues............................... 202 4.2.6 Chargement de l'application dans la page web....... 204 4.2.7 Ajout du menu de navigation..................... 209 4.3 Utiliser l'api........................................ 210 4.3.1 $http......................................... 210 4.3.2 Création de BooksService........................ 210 4.3.3 CRUD avec $resources........................... 214 4.3.4 Liste des livres................................. 216 4.3.5 Détail........................................ 217 4.3.6 Ajouter un livre................................ 219 4.3.7 Afficher les critiques............................ 221 4.3.8 Ajouter une critique............................ 224
Table des matières 7 Chapitre 7 TypeScript 1. Introduction............................................ 229 2. Présentation de TypeScript................................ 230 3. Le langage.............................................. 231 3.1 Le système de typage................................. 231 3.1.1 Déclaration.................................... 231 3.1.2 Les types primitifs.............................. 232 3.1.3 Le type any.................................... 233 3.1.4 L'inférence de type.............................. 234 3.2 L'objet............................................. 234 3.2.1 Les classes..................................... 234 3.2.2 Les modificateurs public, private et protected........ 235 3.2.3 L'héritage...................................... 237 3.2.4 Les interfaces................................... 237 3.3 Les génériques....................................... 239 3.4 Les modules......................................... 240 3.4.1 Les modules internes............................ 240 3.4.2 Les modules externes ou modules ES6.............. 243 3.5 Autres éléments intéressants du langage................. 247 3.5.1 Boucle for...of.................................. 247 3.5.2 Les Union Types................................ 247 3.5.3 Les fonctions anonymes fléchées d'es6.............. 248 3.5.4 ES6 let et const................................. 249 3.5.5 Les déstructurations ES6......................... 250 3.5.6 Les décorateurs................................. 251 3.6 Et pour le futur?.................................... 252 4. Configurer le projet pour utiliser TypeScript................. 253 4.1 Installation......................................... 253 4.2 Compilation........................................ 253 4.2.1 En ligne de commande.......................... 253 4.2.2 Configuration de la compilation avec Visual Studio... 254
8 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 4.2.3 Configuration de la compilation avec tsconfig.json... 255 4.2.4 Intégration à la build Grunt...................... 256 4.3 Utiliser TypeScript avec des librairies JavaScript.......... 258 4.3.1 Les fichiers de définition de type.................. 258 4.3.2 Récupération automatisée des fichiers de définition.. 258 4.3.3 Utilisation des librairies en TypeScript............. 260 4.4 Coder en AngularJS avec TypeScript.................... 261 4.4.1 Transformation du code AngularJS pour TypeScript.. 261 4.4.2 Création des modules........................... 263 4.4.3 Configuration de RequireJS....................... 266 4.4.4 Et pour Angular 2?............................. 270 4.5 Déboguer en TypeScript.............................. 271 4.5.1 Dans Visual Studio............................. 271 4.5.2 Dans les autres navigateurs...................... 272 Chapitre 8 Web apps adaptatives 1. Introduction............................................ 275 2. Responsive design ou site dédié?........................... 276 2.1 Le site dédié........................................ 276 2.2 Le site web responsive................................ 277 2.3 Optimisation....................................... 278 2.4 L'approche RESS..................................... 279 3. CSS................................................... 280 3.1 Présentation de CSS................................. 280 3.2 Les feuilles de style.................................. 280 3.3 Les sélecteurs CSS.................................... 281 3.3.1 Les sélecteurs de base............................ 282 3.3.2 Le sélecteur d'attribut........................... 284 3.3.3 Les sélecteurs hiérarchiques...................... 285 3.3.4 Les pseudo-classes et pseudo-éléments............. 287
Table des matières 9 3.4 Les media queries.................................... 289 3.4.1 La syntaxe.................................... 290 3.4.2 Les critères.................................... 291 3.4.3 Définir les bonnes media queries pour son projet..... 291 3.4.4 Le viewport.................................... 292 4. LESS................................................... 295 4.1 LESS et Sass......................................... 295 4.2 Fonctionnalités de LESS.............................. 297 4.2.1 Installation et utilisation de LESS................. 297 4.2.2 Les variables................................... 299 4.2.3 Imbrication des fichiers.......................... 299 4.2.4 Organisation des fichiers......................... 301 4.2.5 Imbrication de règles............................ 303 4.2.6 Mixins........................................ 304 4.2.7 Mathématiques................................ 306 4.2.8 Boucles et conditions............................ 306 4.2.9 Le style de l'application.......................... 309 Chapitre 9 Intégration continue 1. Introduction............................................ 311 2. Build.NET.............................................. 311 2.1 Que fait une build.net?............................. 311 2.2 Team Foundation Build............................... 312 2.2.1 Architecture................................... 312 2.2.2 La définition de build........................... 313 2.2.3 Contrôleur de build local ou hébergé............... 314 2.3 Build XAML........................................ 314 2.3.1 Les modèles de processus........................ 315 2.3.2 Configuration................................. 316 2.3.3 Création des agents............................. 317 2.3.4 Création de la définition de build.................. 317
10 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 2.3.5 Personnalisation du modèle de processus........... 321 2.3.6 Activité personnalisée........................... 322 2.4 Build vnext......................................... 323 2.4.1 Configuration................................. 323 2.4.2 Création de la définition de build.................. 325 2.4.3 Exécution..................................... 333 2.4.4 Suivi des exécutions............................ 334 3. Build JavaScript......................................... 335 3.1 Que fait une build JavaScript?......................... 335 3.2 Grunt.............................................. 336 3.2.1 Présentation................................... 336 3.2.2 Configuration de la build Grunt du projet.......... 336 3.3 Gulp............................................... 337 3.4 Préparation des livrables pour la production.............. 338 3.4.1 Présentation................................... 338 3.4.2 Génération des Bundles avec Grunt................ 339 3.5 Exécution de la build................................. 342 3.5.1 Exécution manuelle et automatisée................ 342 3.5.2 Intégration à TFS Build.......................... 342 Chapitre 10 Les tests 1. Introduction............................................ 343 2. Les tests unitaires........................................ 344 2.1 Tests unitaires et TDD............................... 344 2.2 Anatomie d'un test unitaire........................... 345 2.3 Les tests unitaires en.net............................ 345 2.3.1 Création d'un projet de test unitaire............... 345 2.3.2 Configuration................................. 346 2.3.3 Écriture de tests................................ 347 2.3.4 Exécution des tests............................. 350 2.3.5 Intégration à la build TFS........................ 352
Table des matières 11 2.4 Les tests unitaires en JavaScript........................ 352 2.4.1 Karma........................................ 352 2.4.2 Mocha........................................ 356 2.4.3 Chai.......................................... 357 2.4.4 SinonJS....................................... 359 2.4.5 Intégration à Grunt............................. 361 3. Les tests fonctionnels..................................... 362 3.1 Introduction........................................ 362 3.2 Plans, suites et cas de tests............................ 364 3.3 Planification........................................ 365 3.3.1 Création d'un plan de test........................ 365 3.3.2 Création de suites de tests....................... 366 3.3.3 Création de cas de tests.......................... 367 3.4 Exécution.......................................... 371 3.5 Suivi et rapports..................................... 374 4. Tests de charge.......................................... 376 4.1 Introduction........................................ 376 4.2 Les tests web....................................... 377 4.3 Les tests de charge................................... 380 4.4 Tests de charge dans le cloud.......................... 386 Chapitre 11 Déploiement et suivi en production 1. Introduction............................................ 387 2. Déploiement continu sur Azure avec Visual Studio Online...... 388 2.1 Présentation........................................ 388 2.2 Configuration...................................... 388 3. Gestion avancée des déploiements avec Release Manager........ 392 3.1 Présentation........................................ 392 3.2 Configuration...................................... 393 3.2.1 Création du chemin de livraison en production...... 401 3.2.2 Livraison d'une nouvelle version................... 405
12 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 4. Suivi et analyse de l'application en production avec Application Insights.................................. 407 4.1 Présentation........................................ 407 4.2 Configuration...................................... 408 4.2.1 Configuration du service......................... 408 4.2.2 Ajout à un nouveau projet....................... 413 4.2.3 Ajout à un projet existant........................ 414 4.3 Récupération et analyse des données.................... 415 4.3.1 Récupération et analyse des premières données...... 415 4.3.2 Informations disponibles de base.................. 417 4.3.3 Données d'utilisation des pages................... 419 4.3.4 Intégration à une application AngularJS............ 420 4.3.5 Suivi de la disponibilité.......................... 424 4.3.6 Mise en place d'alertes........................... 426 Chapitre 12 Les nouvelles API d HTML5 1. Introduction............................................ 429 2. Les Web Components.................................... 430 2.1 Principes........................................... 430 2.1.1 Comprendre le Shadow DOM..................... 430 2.1.2 Déclaration de nouveaux composants.............. 433 2.1.3 Utilisation des templates et des imports............ 434 2.1.4 Utiliser les Web Components avec des librairies JavaScript...................... 438 3. Géolocalisation.......................................... 439 3.1 Présentation........................................ 439 3.2 Comment ça marche?............................... 439
Table des matières 13 4. Hors ligne.............................................. 441 4.1 Le cache d'application................................. 441 4.2 Stockage de données en local.......................... 444 4.2.1 Le Web Storage................................. 444 4.2.2 IndexedDB.................................... 445 5. Accès au système........................................ 446 5.1 FileAPI............................................. 446 5.2 getusermedia....................................... 452 5.3 Orientation, accélération et autres capteurs............... 454 6. Graphisme avancé....................................... 455 6.1 Canvas............................................ 455 6.1.1 Canvas 2D..................................... 455 6.1.2 Canvas 3D.................................... 457 6.2 SVG............................................... 457 7. Les Web Workers........................................ 460 8. Et les autres?........................................... 467 Chapitre 13 Évolution des standards et rétrocompatibilité 1. Introduction............................................ 469 2. Connaître le support d'une fonctionnalité.................... 470 3. Détection et support des fonctionnalités..................... 471 3.1 Modernizr.......................................... 471 3.1.1 Présentation................................... 471 3.1.2 Utilisation.................................... 471 3.1.3 Chargement asynchrone de fichiers................ 473 3.2 Polyfills............................................ 474 Index.................................................. 475
Chapitre 7 TypeScript 1. Introduction TypeScript Avec l'explosion des applications web modernes sont apparues de nouvelles problématiques pour lesquelles le JavaScript n'avait pas été prévu au départ. D'un simple langage de script destiné à la validation des formulaires et la dynamisation de pages web, il est passé à un langage utilisé pour des applications complètes composées de plusieurs centaines de milliers de lignes de code. Ce changement implique que le code est écrit par des équipes de développeurs comptant parfois plusieurs dizaines de personnes. Comme nous l'avons vu, cela entraîne des problématiques de qualité de code, la mise en place de conventions, des tests unitaires, des tests de performances, de la compilation même. Sur de nombreux points, JavaScript a évolué pour pallier ces difficultés et la spécification ECMAScript 6, longtemps appelée ES6 et validée depuis peu sous la dénomination ES 2015, apporte son lot de nouveautés bienvenues avec la gestion des classes, des modules et de nombreuses évolutions de ce type. Le problème est que le parc actuel des navigateurs utilisés est très divers et que le support d'es6 n'est pour le moment que partiel même sur les navigateurs récents. TypeScript est né de ces problématiques et a pour objectif de proposer dès aujourd'hui tous les outils de développement modernes qui manquent à JavaScript. Cela inclut bien entendu les fonctionnalités d'es6 mais aussi des outils permettant de faciliter le travail des développeurs et une syntaxe qui sera moins déroutante pour les développeurs issus des langages fortement typés.
230 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 2. Présentation de TypeScript TypeScript est une surcouche de JavaScript qui permet de proposer des solutions aux problématiques propres au développement d'applications JavaScript de grande échelle. TypeScript vous offre le meilleur du JavaScript d'aujourd'hui et de demain : le langage supporte déjà la grande majorité des fonctionnalités d'ecmascript 6, la prochaine version de JavaScript, et vous permet d'entamer dès aujourd'hui le développement de vos applications avec cette version qui sera le nouveau standard dans les années à venir. La force de TypeScript est de proposer la compilation en ECMAScript 5 ou 6, ce qui vous permet de prévoir vos nouveaux développements avec ES6 en avance tout en assurant le support des navigateurs actuels avec ES5. Vous pourrez alors basculer en ES6 dès que les navigateurs offriront un niveau de support suffisant. TypeScript intègre les modules d'es6 qui permettent de séparer les responsabilités en fichiers et modules différents comme le font également de nombreux frameworks dont AngularJS. Les modules permettent de déclarer des dépendances entre eux et facilitent la création des tests unitaires tout en permettant d'organiser le code efficacement lorsque votre application comprend plusieurs centaines de milliers de lignes. En plus d'offrir le meilleur de JavaScript, TypeScript apporte des fonctionnalités spécifiques telles que le typage fort du langage. Grâce au typage fort, TypeScript permet de faciliter le travail des développeurs grâce à des outils d'aide et d'analyse en direct du code comme une IntelliSense aussi performante que pour du.net, et des validations par le compilateur permettant de détecter immédiatement des erreurs dues à un problème de type qui peuvent facilement apparaître avec le système de typage dynamique de JavaScript. Le système permet également d'utiliser des concepts tels que les interfaces, l'héritage, les membres privés ou publics, les énumérations et bien d'autres encore, avec une syntaxe simple et lisible alors que leur utilisation en JavaScript requiert une implémentation manuelle rendant le code plus lourd à lire. Editions ENI - All rights reserved
TypeScript Chapitre 7 231 TypeScript a depuis sa création été très bien accueilli par la communauté et son usage est de plus en plus fréquent. Il se marie même si bien avec AngularJS que l'équipe développant le framework chez Google s'est associée à l'équipe TypeScript de Microsoft pour que la prochaine version majeure d'angularjs repose entièrement sur TypeScript. AngularJS 2 est annoncé pour une disponibilité prochaine et est entièrement basé sur ES6 avec TypeScript. 3. Le langage 3.1 Le système de typage 3.1.1 Déclaration L'un des principes de base de TypeScript, qui lui a d'ailleurs valu son nom, et la possibilité de définir les types des variables et des objets utilisés dans le code. La définition du type d'une donnée s'effectue très simplement lors de sa déclaration de la façon suivante. Déclaration d'une variable typée var name: string; var age: number; var ismarried: boolean; De la même façon, il est possible de déclarer le type de retour d'une fonction ainsi que de ses paramètres d'entrée. Déclaration d'une fonction typée function getdisplayage(age: number): string { return age + " ans"; }
232 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS La fonction getdisplayage prend donc un nombre en entrée et retourne une chaîne de caractères. Le fait de renseigner ces informations permet à Visual Studio de fournir une IntelliSense adaptée et vous donne plus d'informations au moment d'utiliser cette fonction comme dans la capture ci-dessous : Si malgré tout une utilisation non conforme de la fonction est faite, Visual Studio vous avertit de l'erreur grâce au compilateur TypeScript. Si par exemple le paramètre passé est une chaîne de caractères au lieu d'un nombre : La compilation du code permet ainsi une première validation et limite le risque d'erreur de type. 3.1.2 Les types primitifs TypeScript dispose d'un ensemble de types primitifs. Parmi ceux-ci se trouvent bien entendu les types primitifs déjà présents dans JavaScript tels que String, Number, Boolean et Arrays pour les tableaux. À ces types primitifs issus de JavaScript s'ajoutent les énumérations. Elles sont identiques aux énumérations en C# et se déclarent avec le mot-clé enum au lieu de var. Editions ENI - All rights reserved
TypeScript Chapitre 7 233 Déclaration et utilisation d'une énumération enum Color {Red, Green, Blue}; var c: Color = Color.Red; Tout comme en C#, les éléments des énumérations sont numérotés en partant de 0 mais il est possible d'en spécifier la valeur manuellement. enum Color {Red = 1, Green = 2, Blue = 5}; Le type Void permet de déterminer l'absence totale de type. Il est utilisé pour les fonctions ne retournant aucune valeur. Attention! Void ne désigne que l'absence de valeur et non pas un type indéfini. 3.1.3 Le type any En plus des types primitifs et des types personnalisés qui peuvent être définis avec TypeScript, il existe le type any. Le type any est le seul type dynamique de TypeScript. Les validations sur une donnée de type any sont minimales : il correspond en fait au système de typage de JavaScript. Ainsi, il est possible de déclarer explicitement une variable de type any si l'on n'a pas de moyen de connaître le type de données qui pourront être chargées dans celle-ci au moment de sa déclaration. var surprise: any; Si l'on modifie la déclaration de la fonction getdisplayage de l'exemple précédent afin que celle-ci accepte un paramètre de type any en entrée, la compilation ne lève plus d'erreur. En revanche, le risque d'erreur à l'exécution est grand du fait que n'importe quel type de donnée est accepté en entrée. Paramètre d'entrée de type any function getdisplayage(age: any): string { return age + " ans"; } console.log(getdisplayage("25"));
234 Développement d'applications Web HTML5 L art et la manière avec Visual Studio 2015 et TFS 3.1.4 L'inférence de type TypeScript dispose d'un système d'inférence de type. Cela signifie simplement que dans le cas d'une variable directement initialisée à sa déclaration, TypeScript va déterminer son type à partir de la valeur d'initialisation. Inférence de type var name = "John"; var age = 42; // => string // => number Si aucun type n'a pu être inféré de façon certaine par le compilateur TypeScript, c'est le type any qui sera utilisé par défaut. Type any lorsque l'inférence est impossible var about = null; // => any var other; // => any var prop = { a; b; } // => { a:any; b:any; } 3.2 L'objet 3.2.1 Les classes TypeScript implémente le système de classes d'ecmascript 6 avec sa syntaxe de déclaration. La classe est définie avec le mot-clé class suivi du nom choisi pour celle-ci et définit un constructor comme méthode d'instanciation. En reprenant l'exemple des classes décrites dans le chapitre JavaScript moderne et en le convertissant en TypeScript, on obtient le code suivant. Book class Book { title: string; author: string; } constructor(title: string, author: string) { this.title = title; this.author = author; } Editions ENI - All rights reserved