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 :

ReactEurope : l’événement européen pour tous les amoureux du framework !

Qui a dit que les meilleures conférences sur le web se déroulaient aux Etats-Unis ? ReactEurope revient à Paris du 15 au 18 mai pour des conférences et des ateliers à Paris ! Assistez à des speechs sur plusieurs technologies tels que React.js, React Native, GraphQL, Relay, Universal apps, ReasonML, Webpack, inline CSS.

Firefox Quantum : Un navigateur d’avenir ?

Mozilla l’a annoncé : le 14 novembre sortira Firefox Quantum ! Un nouveau navigateur deux fois plus puissant que Google Chrome remplis de nouvelles fonctionnalités dont la réalité virtuelle !

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