Retour d’expérience TypeScript

Screen Shot 2013-04-26 at 10.13.51 PM

Aujourd’hui, j’ai commencé un nouveau projet nodejs. Cette fois-ci, j’ai choisi d’utiliser TypeScript pour voir ce que ça donne.

Je classerais ce post comme un “fourre-tout”. J’y metterais plusieurs choses que je remarquerais, mais que je n’ai pas encore approfondi. Je rajouterais petit à petit des retours. J’essaierais ensuite, de creuser chaque retour pour en faire un “vrai” post.

L’importation de librairies javascript :

Point noir de ce côté. TypeScript a un compilateur qui vérifie que les méthodes utilisées dans nos fichiers js sont existantes. Jusque là, aucun souci. Seulement, lors de l’utilisation d’une librairie, le compilateur typescript nous renverra une erreur nous disant que la méthode(de la librairie) n’existe pas…

Quand on y réfléchit, c’est tout à fait logique. Comment TypeScript peut-il savoir quelles sont les méthodes existantes dans un fichier js?

Afin que le compilateur sache quelles sont les fonctions qui existent et dans quels “modules”; il va falloir créer un fichier qui les répertories. D’après ce que j’ai pu voir, le convention de nommage serait mylibray.d.js. Si ce fichier est déjà présent dans les sources de la librairie (comme nodejs,express ou jquery), l’effort n’est pas forcément énorme (il faut ajouter ///<reference path=’node.d.ts’/> au début du fichier ). Seulement, si votre librairie ne dispose pas de ce fichier…vous êtes bon pour l’écrire.

Apparemment, l’importation de fichier ts n’aurait pas ce problème. Je ne peux pas trop en dire plus, je n’en sais pas plus.

Je détaillerais ça dans un autre post avec des informations plus précises et plus exactes.

 

TypeScript

Présentation

TypeScript est un langage de programmation développé par Microsoft(co-créé par Anders Hejlsverg, un des créateurs du C#]. Il ajoute une couche syntaxique à JavaScript en s’inspirant de C# et Java. On peut le comparer au CoffeeScript, celui-ci s’inspirant plutôt des langages Python et Ruby. L’avantage de TypeScript est qu’il apporte uniquement une couche syntaxique au JavaScript, il est donc possible d’écrire du JavaScript à l’intérieur du code TypeScript sans aucun problème contrairement à coffeeScript où il faut lui spécifier à l’aide de quotes particulières les lignes écrites en JavaScript.

TypeScript s’inspire également des standards de la future version de JavaScript basé sur Ecma 6.

Pour écrire en TypeScript, il y a deux solutions :

  • Télécharger le plugin pour Visual Studio 2012
  • En utilisant le gestionnaire de paquet de nodeJS : npm  install –g  typescript

Plus d’info : http://www.typescriptlang.org/

Types

TypeScript apporte au JavaScript un typage. JavaScript possède 5 types primitifs : string, number, boolean, null et undefined.

TypeScript définit quant à lui 4 types primitifs :

  • Number : Il correspond au type primitif number de JavaScript. Keyword : number
  • String : Il correspond au type primitif string de JavaScript. Keyword : string
  • Boolean : Il correspond au type boolean de JavaScript. Keyword : bool
  • Any : Il représente toutes les valeurs JavaScript(dont null et undefined) . Keyword : any

Le type peut être déclaré explicitement ou implicitement. A la compilation, tous ces types seront transformés en var. L’intérêt d’utiliser les types de TypeScript est le même intérêt qu’utiliser avec modération de var en C# : La clarté du code ainsi que l’aide de l’auto-complétion d’IntelliSense.

Classes et Héritage

Classes

TypeScript apporte une couche orientée objet au JavaScript. En effet il est possible de créer des classes. Un exemple est beaucoup plus parlant :


 

Une fois la compilation effectuée, voici le fichier js généré :Comme on peut le voir, on retrouve toutes les bases d’un langage objet à savoir le mot clé class, le constructeur, les méthodes de classe et les méthodes statiques ainsi que la portée des variables.


 

Héritage

La partie compilation expliquera plus en détails les différences entre le code JavaScript et TypeScript. Nous pouvons remarquer que le code TypeScript est un peu plus compréhensible et lisible pour un développeur venant de l’univers C# ou Java.

TypeScript apporte aussi la notion d’héritage. Il est possible d’implémenter une interface ou bien d’étendre une classe.

TypeScript :


 

Voici le fichier JavaScript généré :


 

C’est en commençant à faire de l’héritage que l’on voit comment TypeScript peut nous aider à rendre notre code plus compréhensible.

A la compilation, la notion d’interface disparaît et une variable __extends est créée. Cette variable contient le mécanisme JavaScript permettant l’héritage. Ainsi si l’on avait 2 autres classes A et B, B héritant de A. B et Point utiliserait la même variable __extends.

Modules

Une des dernière notion principale qu’apporte TypeScript sont les modules. Deux mots clés sont utilisés, module et export. module permet de définir les limites de note module et export permet de définir quels membres de ce module seront accessibles depuis l’extérieur. Les class étant au final des variables en JavaScript. Voici un exemple :


Le fichier JS généré :


 

Remarque : Le mécanisme d’héritage est créé au début du fichier et non dans le module.Ici, nous pouvons créer en dehors du module que des objets de type PointColor. Le export en TypeScript s’est en effet transformé en Geometrie.PointColor = PointColor. N’ayant pas cette ligne pour la variable Point. La variable Geometrie ne connait donc pas Point.

La compilation

Générer le fichier « .js »

Si Visual Studio est l’IDE dans lequel les fichiers ts sont écrits, alors la compilation se fait en même temps que la compilation du projet. Si ts a été installé avec le gestionnaire de paquet npm. La compilation se fait dans le terminal à l’aide de la commande tsc fichier.ts. Celui-ci générera alors un fichier « .js ». Dans les deux cas, c’est le fichier « .js » qui doit être utilisé pour l’application web.

TypeScript : seulement une surcouche syntaxique

TypeScript ne fournit qu’une surcouche syntaxique à JavaScript. La phase de compilation nous indiquera les erreurs(syntaxique ou sémantique) mais fournira tout de même le fichier JavaScript. De plus le fichier JavaScript généré ne comportera ni les commentaires ni les lignes vides.

Conséquence :

En reprenant l’exemple sur les class( ici ). La version TypeScript nous informe des éléments privés, publics et statiques tandis que la version JavaScript ne le fait pas. En effet JavaScript ne possède pas les concepts de « public », « private » ou même « static ». Après la compilation, le fichier reste du JavaScript. Il est donc possible de récupérer des attributs mis en « private » ou bien une méthode static en se trouvant dans une instance.


 

Synthèse

Si l’on travaille avec Visual Studio, IntelliSense nous fera remarquer que l’on cherche à accéder à un élément privé ou bien que la méthode n’existe pas. Le compilateur nous alertera également qu’il y a des erreurs dans notre code TypeScript. Cependant en JavaScript, ce qui est écrit plus haut est autorisé donc le code sera exécuté sans problème.

Points positifs

TypeScript apporte une syntaxe proche du C# et du Java apportant au code JavaScript une meilleure lisibilité. Ainsi même les développeurs C# et Java peuvent rapidement développer en JavaScript.

TypeScript n’est qu’une couche syntaxique, il ajoute juste une aide au développeur pour mieux structurer son code en ajoutant des concepts. Le développeur n’est pas contraint de respecter ces concepts et peut ignorer les erreurs soulevées par le compilateur.

TypeScript est une surcouche au JavaScript et non un langage à part. Ainsi il est tout à fait possible de faire du JavaScript dans du code TypeScript. Il est possible également de définir un module dans un fichier et de l’utiliser dans un autre.

Le code étant plus structuré, le temps de débuggage est plus court et moins complexe. La rapidité de développement est nettement améliorée. L’application web est plus robuste et a moins de risques d’être boguée.

Points négatifs

Il n’est pas possible de débugger les fichiers TypeScript. Si un problème survient, ce sera sur le fichier JavaScript généré ce qui peut rendre plus compliqué le débogage.

La gestion de l’asynchrone aurait pu être améliorée en utilisant les concepts de développement asynchrone sur Windows 8 avec les mots clé async et await.