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 :

D3.Js vs Chart.Js

D3.Js ou Chart.Js, comment choisir sa bibliothèque graphique ?

D3.Js et Chart.Js, font partis des bibliothèques JavaScript de visualisation de données les plus connues mais aussi les plus utilisées. L’une laisse ses utilisateurs plus libres à la personnalisation et l’autre est considérée comme “plus simple”.

HyperApp : une bibliothèque JavaScript de seulement 1 KB ?

Annoncé en fin d’année 2017, HyperApp est une bibliothèque JavaScript proposant de nombreuses fonctionnalités, le tout pour un poids de seulement 1KB ! Ce qui est relativement peu comparé à Jquery par exemple, qui pèse une trentaine de KB. Malgré ce côté insolite, cette bibliothèque est-elle quand même performante ? La réponse dans cet article !

Firefox Reality : un navigateur dédié à la AR/VR

Après avoir amélioré les performances de son navigateur phare, la société Mozilla a décidé
de s’imposer sur le marché de la réalité mixte en lançant son navigateur dédié : Firefox
Reality. Que propose-t- il ? Est-ce une révolution ? La réponse dans cet article !

Centre de préférences de confidentialité

Cookies Fonctionnels

gdpr[allowed_cookies], gdpr[consent_types], wfvt_2000878799, wordfence_verifiedHuman

Advertising

Cookies Satistiques

_ga, _gat, _gid

Cookies externes

PREF, VISITOR_INFO1_LIVE, YSC, GPS, s_gl, CONSENT
CONSENT, 1P_JAR