Article mis à jour le 10 août 2018 | Publié le 10 août 2018
C’est le langage sur lequel miser en ce moment ! Créé par Microsoft en 2012 dans le but d’améliorer et de sécuriser le développement en JavaScript, il est aujourd’hui un élément fondamental pour le développeur web. TypeScript est un langage destiné à être compilé en JavaScript.
Le fait que TypeScript soit un langage plus typé que JavaScript, permet de détecter une série de bugs dès la compilation. Il nous permet de créer des applications possédant une véritable structure et des outils très qualitatifs. Mais ce qui fait sa force, c’est qu’il peut être compilé depuis n’importe quel système d’exploitation, vers n’importe quelle version de JavaScript, le rendant ainsi compatible avec la majorité des navigateurs. Nous vous proposons une étude de cas afin de vous familiariser avec TypeScript.
Comment installer TypeScript ?
La manière la plus simple d’installer TypeScript est de passer par le gestionnaire de paquets NPM. Pour cela, entrez la commande suivante dans votre terminal :
npm install -g typescript
Une fois installé, il vous suffit de créer un fichier TypeScript dans votre projet (application, site, etc.) et d’y insérer votre fichier de configuration tsconfig.json.
Il se présente sous la forme suivante :
See the Pen YjdJPj by Aaron (@leox47) on CodePen.
Ce fichier est celui de base. Il est également possible de le personnaliser avec de nombreuses propriétés. Vous les retrouverez facilement sur le site officiel en cliquant ici.
Exemple de création avec TypeScript
Dans l’exemple ci-dessous, nous avons créé un module permettant de charger des fichiers SVG en asynchrone directement dans le DOM.
Le fait de charger les SVG en asynchrone permet de charger le DOM plus rapidement (et donc d’optimiser les performances web), mais surtout de pouvoir les modifier grâce au CSS.
C’est parti ! Commençons par créer notre objet.
See the Pen OwrapW by Aaron (@leox47) on CodePen.
En premier lieu, observez bien le code et comparez-le à un bloc de code JavaScript basique. Vous observerez une grande différence au niveau de la structuration et surtout vous remarquerez quelques fonctionnalités intéressantes.
Par exemple le premier élément (Interface) permet de restreindre le type de données d’un ensemble de paramètres. Il correspond ici à la configuration de notre objet. Au lieu de créer plusieurs blocs de code de vérification, vous pouvez directement vous en passer en typant les variables (string / number / Array / boolean / etc.).
Une autre différence notable est que nous pouvons utiliser une véritable structure d’objet avec des paramètres ou méthodes private, static ou public.
Notre objet est maintenant créé, il est temps de s’en servir ! S’il est mal utilisé, TypeScript ne compilera pas notre code en JavaScript, ce qui nous évitera beaucoup d’erreurs.
See the Pen KBbrmQ by Aaron (@leox47) on CodePen.
Encore une fois, quelques éléments ont retenu notre attention : comme par exemple l’utilisation de la méthode static, qui permet de cibler directement un objet sans l’instancier. Ou encore d’autres méthodes qui ne peuvent être utilisées que lorsqu’on instancie un objet comme la destroy().
Si vous souhaitez en savoir davantage sur les nouveautés de TypeScript, sachez que la version 3.0 est sortie fin juillet ! Vous pouvez découvrir les nouvelles fonctionnalités de celle-ci en cliquant ici.
Nous nous intéressons à toutes les facettes de JavaScript, notamment aux frameworks qui lui sont dédiés. D’autres articles sur le développement web arrivent très bientôt sur notre blog.
