Comprendre ce qu'est TypeScript et comment l'utiliser ?

Pour bien comprendre le contenu de cet article, il est préférable que vous soyez déjà familier avec Javascript, si ce n'est pas le cas, je vous invite à suivre un cours sur l'une de ces plateformes au préalable.

Pourquoi TypeScript ?

Si l'on fait une rapide analyse de son nom, TypeScript est une contraction de "Type" et de "Javascript", ce qui nous en apprends déjà un peu sur sa raison d'exister.

Javascript est un langage non-typé (on parle aussi de typage dynamique), ce qui signifie que lorsque vous déclarez une variable, vous n'avez nativement pas la possibilité de dire à l'interpréteur Javascript de faire attention à ce que telle donnée corresponde à un type précis.

Si cela apporte un avantage de souplesse et de rapidité d'écriture, on découvre bien vite que c'est au détriment de la qualité et de la solidité du code, car ce dernier est beaucoup plus propice aux erreurs humaines.

C'est pour palier à ce problème qu'en 2012, Microsoft a sorti la première version de TypeScript, censé aider les développeurs web à produire du code plus robuste.

Voilà pourquoi je ne conseille pas d'apprendre TypeScript avant Javascript, car si l'on a jamais rencontré les problématiques liées à Javascript auparavant, il est plus difficile de comprendre les vrais atouts de ce langage.

Qu'est-ce que TypeScript ?

On sait pourquoi TypeScript a été créé, mais qu'en est-il réellement ? Est-ce un langage indépendant de Javascript ou les deux sont-ils liés ?

On défini TypeScript comme étant un "superset" de Javascript (en français on parle de "sur-ensemble", ou d'inclusion), cela signifie que syntaxiquement, TypeScript inclus toute la syntaxe de Javascript, et rajoute des fonctionnalités par dessus, comme la possibilité d'ajouter des types statiques pour les données.

Est-ce que cela veut dire qu'un programme écrit en Javascript est aussi un programme TypeScript valide ?

Oui, même si selon la configuration du compilateur TypeScript cela peut poser quelques problèmes, dans l'idée un programme en Javascript peut être compilé par TypeScript.

Par contre, l'inverse n'est pas forcément vrai, car dès lors que l'on utilise les fonctionnalités ajoutées par TypeScript, alors le code ne sera plus interprétable par un moteur d'exécution JS sans être compilé au préalable.

C'est cette nature qui fait de TypeScript un langage puissant, mais qui perd tout son intérêt s'il est écrit sans linter et sans une configuration assez stricte du compilateur, car le code compilé pourrait être ni plus robuste, ni plus rapide.

La compilation

Une fois un programme écrit en TypeScript, il va falloir le compiler en JavaScript, car quelque soit l'environnement d'exécution (web ou NodeJS), le seul langage interprété reste le Javascript.

À l'exception de Deno qui supporte nativement le TypeScript, mais que l'on ne retrouve pas encore en production.

Certains développeurs pensent que TypeScript est un langage indépendant et qu'il a un effet pendant le runtime, mais c'est faux : Une fois compilé en Javascript, il ne reste plus rien de TypeScript.

La vérification des types statiques se fait lors de la compilation, et une fois cette étape passée, votre programme n'a plus la possibilité de vérifier les types de ses variables lors de l'exécution du code !

Mise à part si vous souhaitez valider des données chargées de manière dynamique (payload http, localStorage, etc...), mais cela n'a rien à voir avec TS.

Le compilateur du langage s'appelle tsc pour "TypeScript Compiler", et nous allons voir comment s'en servir pour compiler votre premier fichier .ts

Comment débuter ?

La première chose à faire est d'installer le compilateur TypeScript avec NPM :

$ npm install -g typescript

Une fois installé, vous allez pouvoir générer un fichier de configuration de base pour le compilateur :

$ tsc --init

Par défaut le code en sortie du compilateur sera compatible ES3, si vous voulez vous pouvez changer cette ligne dans le fichier tsconfig.json :

//tsconfig.json
...
  "target": "es2015",
...

Ensuite on va pouvoir venir créer notre premier fichier index.ts :

//index.ts
const str: string = "Hello World";
console.log(str);

Puis on va le compiler en Javascript en appelant le compilateur TypeScript :

$ tsc index.ts

Et voilà, le tour est joué ! Vous allez voir apparaitre un fichier index.js qui contiendra votre code TypeScript, compilé en Javascript :

//index.js
const str = "Hello World";
console.log(str);

Vous voyez, ici le compilateur n'a eu qu'à enlever toute référence au type strict pour transformer le TS en JS, mais c'est parce que notre code était valide. Essayez maintenant de changer le type de la variable string en number.

index.ts:1:5 - error TS2322: Type 'number' is not assignable to type 'string'.

Ici TypeScript nous a empêché de commetre une erreur en assignant une valeur du mauvais type, ce qui aurait pu avoir des conséquences sur l'exécution de notre code !

Pour aller plus loin

Dans cet article j'ai essayé de vous présenter la base de TypeScript pour vous faire comprendre la vraie nature de ce langage, pourquoi il existe et pourquoi il faut s'en servir quand c'est possible.

D'autres articles arriveront prochainement pour aller plus loin, mais si vous désirez d'ores et déjà commencer à apprendre le langage et ses outils, je vous invite à consulter le guide officiel "TypeScript en 5 minutes" (en anglais) :

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

Et vous pouvez aussi utiliser le playground en ligne pour vous entrainer :

https://www.typescriptlang.org/play