Appuyez sur Entrée pour voir vos résultats ou Echap pour annuler.

Arrêtez de coder en JavaScript!

JavaScript n’est pas un nouveau langage. Avec 23 ans derrière la cravate, JS a fait sa place parmi les langages web malgré toutes les embûches connues. On a qu’à penser à Internet Explorer qui fait des siennes avec certaines fonctions non prises en charge, ou encore à Internet Explorer qui exécute le JS assez lentement, ou Internet Explorer qui ne se conforme pas aux avancées de ECMAScript… 😛

J’ai soif 🍺

Ajourd’hui, on va parler de TypeScript. Je vais vous montrer comment monter un environnement de développement facilement. Si vous avez l’habitude de travailler avec JS + jQuery, vous ne voudrez plus jamais en refaire 😉

Les sources de cet article sont disponibles sur GitHub.

Prérequis

Avant de partir, assurons-nous que vous avez le strict minimum pour développer en TS.

Les dépendances

Une fois Node installé, vous devrez ajouter des dépendances globales pour npm, le gestionnaire de paquets de Node. Lorsqu’installées globalement, ces dépendances seront disponibles pour toutes vos futures applications. Vous pouvez exécuter les commandes suivantes de n’importe où dans un shell.

TypeScript

GruntJS

Configuration du projet

Trouvez un répertoire vide où vous allez créer votre projet. Depuis ce répertoire vide, ouvrez une invite de commande et exécuter :

Puis répondez aux questions du meilleur de votre connaissance 😉 laissez vide ou par défaut si vous ne connaissez pas la réponse. Vous devriez avoir un nouveau fichier appellé package.json  qui devrait ressembler à :

GruntJS

Grâce à ce fichier, nous allons pouvoir configurer des dépendances spécifiques au projet et lancer la compilation du TypeScript. Dans un premier temps, nous allons configurer Grunt qui nous servira à compiler le code TypeScript en JavaScript. Exécuter :

Grunt est un peu l’équivalent de Ant. Il nous permet de scripter des processus répétitifs facilement en proposant une multitude de plugins différents. Par exemple, installons celui de TypeScript :

Ces plugins vont nous permettre d’exécuter la compilation. Installons maintenant un plugin pour supprimer un répertoire, question de le nettoyer avant de compiler :

Le Gruntfile

Après avoir installé tous ces modules pour Grunt, nous allons créer un fichier de configuration qui va définir les actions à exécuter. À la racine du projet, à côté de package.json , créer un fichier nommé Gruntfile.js .

À l’intérieur de ce fichier, nous allons charger les plugins préallablement installés via npm :

À la racine du projet, si vous ouvrez une invite de commande et tapez  grunt, vous devriez voir done. Je reprendrai plus bas pour la configuration des différents plugins.

La structure de répertoire

Cette étape est facultative. Il n’y a pas de structure de répertoire meilleure qu’une autre, tant que ça reste compréhensible. Voici un exemple :

À la racine : Ne laissez que les fichiers de configuration. Créer plutôt un répertoire build et un src.

Hello World!

Cet article prend en compte que vous connaissez la syntaxe de TypeScript. Si vous ne connaissez pas, lisez ceci. Peu importe la nature de l’application, nous allons considérer que votre code est dans src , sans regard aux sous répertoires. Voici un exemple qui n’est qu’un Hello World en MVC :

Puis :

Et finalement… :

Le principe est simple, nous utiliserons le service pour générer une instance du model et l’afficher dans la vue lorsque nous cliquerons sur un bouton. Remarquez aussi que le service sera injecté au contrôleur. Voici la vue :

Remarquez ici qu’on n’importe un seul fichier JavaScript qui sera notre code TS compilé. Notez aussi l’utilisation de RequireJS, puisque les modules de TypeScript que nous avons créés seront compilés pour être des modules RequireJS.

Le point d’entrée

Afin de démarrer notre application TS, il nous faut un point d’entrée qui sera responsable d’initialiser les différents composants. Voici un exemple simple qui ne sera responsable que d’injecter le service au contrôleur :

Vous remarquerez aussi l’instanciation de Main . Ceci va démarrer l’application.

Configuration de Grunt

Un peu plus haut, nous avons créé un Gruntfile.js , mais ne l’avons pas configuré. Commençons par le nettoyage d’un dossier qui accueillera le code compilé. La configuration de Grunt va dans l’objet passé en paramètre à grunt.initConfig().

Clean

Consulter la documentation du plugin.

Ceci supprimera le contenu du dossier build.

Compiler

Consulter la documentation du plugin.

Ceci compilera tous les fichiers portant l’extension ts  dans un seul fichier bundle.js .

Configurer la tâche par défaut

Éditez simplement le paramètre passé à la fonction registerTask()  afin de lister les plugins à appeler :

Puis, exécutez grunt via l’invite de commande!

Conclusion

Espérons-le, vous avez appris à vous débarrasser une fois pour toute de JS dans vos projets web! Le principal avantage d’utiliser TS est qu’il y a de la compilation en place, donc aussi une certaine validation du code avant l’exécution de ce dernier, contrairement à JS.

Les sources de cet article sont disponibles sur GitHub.

Si vous avez apprécié, partagez 🙂 Nous produisons chaque semaine du contenu gratuit et sans pub pour vous, chère communauté.

Suivez-nous par courriel!

Saisissez votre adresse courriel pour vous abonner au blog d'Ezo et recevoir une notification de chaque nouvel article par email.

Rejoignez 13 autres abonnés