TypeScript : C’est quoi ? Et pourquoi l’utiliser ?

TypeScript : C’est quoi ? Et pourquoi l’utiliser ?

TypeScript : Un langage très récent lancé en octobre 2012 en version 0.8. Il a été conçu par Anders Hejlsberg, également concepteur du langage C#. C’est un langage de programmation open source et multi-plateforme son code source est disponible sur GitHub.

Alors pourquoi utiliser ce langage de programmation? Et comment l’utiliser ?

Pourquoi utiliser TypeScript ?

Typescript est un langage transcompilé dont son code n’est pas directement exécuté, il est compilé en Javascript. C’est le code Javascript qui sera exécuté par les navigateurs. Donc  tout JavaScript est déjà TypeScript et c’est ça sont point fort.

L’avantage de ce langage par rapport à Javascript est de pouvoir typer fortement les variables ce qui permet de rendre ce langage moins sensible aux bugs. D’autres apports syntaxiques sont faits par Typescript comme les classes, les modules ou les interfaces ce qui permet de rendre le langage plus attrayant.

Installation et mise en place

Il existe deux possibilités pour installer les outils nécessaires pour TypeScript :

  •     Via l’installation de npm
  •     Via l’installation d’un plugin sur votre IDE s’il appartient à cette liste

Vous pouvez installer Typescript globalement pour y accéder depuis n’importe quel répertoire.

npm install -g typescript //Pour vérifier votre version tsc --version
Code language: JavaScript (javascript)

Vous pouvez aussi l’installer localement

npm install typescript --save-dev

Nous allons commencer par un simple code Javascript valide dans un fichier TypeScript, identifié par l’extension .ts.

function bonjour(nom) { return "Bonjour, " + nom; } let nom = "StackTrace"; document.body.innerHTML = bonjour(nom); //Nom fichier bonjour.ts
Code language: JavaScript (javascript)

Typescript vient avec un compilateur (TSC). Pendant le développement c’est ce compilateur qui transcompile le code Typescript en application Javascript.

Nous allons compiler notre code avec la commande ci dessous.

tsc bonjour.ts
Code language: CSS (css)

Un fichier bonjour.js est généré dans le même dossier là ou nous avons notre fichier bonjour.ts.

function bonjour(nom) { return "Bonjour, " + nom; } var nom = "StackTrace"; document.body.innerHTML = bonjour(nom);
Code language: JavaScript (javascript)

Maintenant il suffit de référencer notre fichier Javascript dans la page html pour exécuter le programme.

<script src="bonjour.js"></script>
Code language: HTML, XML (xml)

Compiler en utilisant tsconfig.json

La présence d’un fichier tsconfig.json dans un répertoire indique que le répertoire est la racine d’un projet Typescript. Le fichier tsconfig.json spécifie les fichiers racine et les options de compilation requises pour compiler votre projet.

Pour générer un fichier tsconfig.json, nous allons exécuter la commande suivante :

tsc --init

Cette commande génère un fichier avec des options de configuration minimales, similaires à celles ci-dessous.

{ "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": false, "sourceMap": false, "pretty": true }, "exclude": [ "node_modules" ] }
Code language: JSON / JSON with Comments (json)

Conclusion

Cette présentation est évidemment loin d’être complète , lors de notre prochain article nous allons beaucoup plus plonger dans cette langage qui est en pleine croissance tant sur le plan de ses spécifications que sur le plan de sa popularité.

Vous pouvez voir aussi : Les dernières nouveautés de Javascript.

Partagez !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *