Front-end

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.

Partager

Twitter Linkedin

Vous serez peut-être aussi intéressé par :

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 manière exponentielle. On compte plus de 700 000 téléchargements en juin 2018 (source : npm). La rédaction de Numendo vous propose cette semaine de découvrir Hasura : un produit open source capable de vous offrir des API GraphQL sur des applications Postgres nouvelles ou existantes.

Revivez le dernier meet-up de Numendo et venez assister au prochain !

Fin novembre 2017, Numendo a organisé un meet-up afin de discuter des dernières tendances du développement web. Trois de nos consultants ont fait des conférences sur Angular, la VR et la réalité augmentée.

Vous n’avez pas pu assister au meet-up ? Pas de soucis, vous pouvez toujours regarder la rediffusion disponible dans cet article.

Angular CDK : Google sort un kit de composants pour Angular

La multinationale américaine a décidé de mettre fin aux tâches répétitives sur son Framework JS. La solution qu’elle propose est un nouveau kit de composants qui facilitera les processus de développement et qui fera surtout gagner du temps aux développeurs. Découvrez Angular CDK