Pourquoi utiliser TypeScript pour vos projets ?

Partager

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.

Vous serez peut-être aussi intéressé par ces articles

Au premier coup d’œil, on pourrait croire à une réponse d’Ionic à React Native, mais cette fois-ci, le framework dédié aux applications...

Bootstrap 4 : un framework CSS innovant

Durant le début de l’année, l’équipe de Bootstrap a annoncé la version 4 de son outil. Pour rappel, Bootstrap est une “boîte à...

Hasura : obtenez n’importe quelle API GraphQL sur vos applications Postgres

Cela fait maintenant 3 ans que Facebook a annoncé l’arrivée de GraphQL. Depuis, l’utilisation de ce langage de requêtes a augmenté de...

Ce site web stocke des données telles que les cookies pour activer les fonctionnalités nécessaires du site, y compris l'analyse. Vous pouvez modifier ces paramètres à tout moment ou accepter les paramètres par défaut.
Préférences en matière de dépôt de données

Lorsque vous visitez des sites Web, ils peuvent stocker ou récupérer des données dans votre navigateur. Ce stockage est souvent nécessaire pour la fonctionnalité de base du site Web.
L’analyse peut être utilisée comme stockage. La confidentialité est importante pour nous, vous avez donc la possibilité de désactiver ce type de stockage qui n’est pas être nécessaire pour le fonctionnement de base du site Web. Le blocage de l’analyse peut avoir un impact sur votre expérience sur le site Web.

Nous utilisons des cookies pour personnaliser votre expérience sur Numendo.