Vous avez déjà entendu parler de TypeScript, sans savoir vraiment de quoi on parle ? Vous aimeriez bien avoir un meilleur aperçu de TypeScript avant de savoir si vous souhaitez l’utiliser dans vos développements ou non ? Je vous invite à prendre 5 minutes pour mettre fin à toutes ses interrogations. 🙂

Le commencement : Et si JavaScript n’était plus fiable ?

Le JavaScript a toujours présenté les même faiblesses : pas de typage des variables, pas de signatures de fonctions, pas de classes comme dans les autres languages objets… Bref, pour ceux qui ont commencé à écrire beaucoup de code, on arrive vite à un moment où on s’emmêle les pinceaux, notre code devient de moins en moins élégant, voir illisible, et on aboutit à un magnifique code spaghetti.

tumblr_nkkm4swV3b1r8jkpuo1_250
Le code spaghetti ressemble à ça.

Certaines entreprises et la communauté des développeurs JavaScript s’est mis alors à développer des méta-language pour JavaScript: CoffeeJS, Dart, TypeScript. Ce sont simplement des languages qui apportent des éléments à JavaScript, avec une nouvelle syntaxe, souvent moins verbeuses que le JavaScript natif. En plus d’une nouvelle syntaxe plus sympatique, ces outils apportent souvent de nouvelles fonctionnalité qui font défaut au JavaScript natif.

Par exemple, TypeScript permet de typer vos variables, ce qui permet d’écrire du code de manière plus robuste, surtout si votre application grandit encore et encore, et que vous êtes plusieurs développeurs à travailler avec les mêmes variables. Une fois que vous avez développer votre application avec le méta-language de votre choix, vous devez le compiler (c’est à dire transformer) votre code en du code JavaScript que le navigateur pourra interpréter.

En effet, votre navigateur ne sait pas interpréter le CoffeeJS, ni le Dart, ni le TypeScript. Vous devez d’abord compilez ce code en JavaScript pour qu’il soit lisible par ce dernier.

Le vif du sujet : Un “Hello, World !” en TypeScript

Nous n’allons pas nous quitter sans un petit exemple avec TypeScript. Tout d’abord installons TypeScript sur notre machine afin de transformer notre futur code TypeScript vers du JavaScript :

npm install -g typescript

Ensuite vérifions que l’installation s’est bien déroulée :

tsc -v

Le numéro de la version de TypeScript que vous venez d’installer devrait s’afficher. Essayer d’avoir une version supérieur à 1.8 pour pouvoir bénéficier de toutes les dernières fonctionnalités de TypeScript comme les décorateurs par exemple.

Je vous propose de tester tout de suite une de fonctionnalités phare de TypeScript : le typage des données. Créer donc un fichier test.ts (ajouter bien l’extension ts car il s’agit d’un fichier TypeScript). Copiez-y le code suivant :

// On déclare un nombre
var pointDeVie: number = 100;

// On déclare une chaîne de caractère
var surnom: string = 'Green Lantern';

// On déclare une variable qui correspond à une classe de notre application !
var greenLantern: Heros = new Heros(pointDeVie, surnom);

// On peut créer un autre héros de type Heros
var superMan: Heros = new Heros(pointDeVie, 'Superman');

// Je peut même créer un tableau de héros, qui contient tous les héros de mon application !
var heros: Array<Heros> = [greenLantern, superMan];

Et voilà, vous venez d’écrire votre premier fichier TypeScript ! Comme vous le voyez, on peut typer nos variables avec des types natifs (string, number) ou des types personnalisées (Heros et tableau de Heros). Ce typage des variables est très pratique car il nous permet d’être sûr du type de la variable que l’on utilise. Ce que je vous propose, c’est de vérifier que TypeScript se préoccupe bien de vérifier le type de nos variables. Remplacer la première ligne de test.ts par :

tsc test.ts

A ce moment, TypeScript lève une erreur :

test.ts(7,1): error TS2322: Type ‘string’ is not assignable to type 'number’.

L’erreur est explicite ! On ne peut pas assigner de chaîne de caractère à une variable de type number (La variable point de vie en l’occurence).

Sachez qu’il s’agit là juste d’un aperçu mimim de ce qu’il est possible de faire avec TypeScript : classe, héritage, décorateur, signature de fonctions…

Mon objectif était juste de vous donner envie d’utiliser TypeScript pour écrire du code beaucoup plus solide, en déclenchant un Wahou effect chez les plus suspicieux d’entre vous. : )

Conclusion

Si vous venez de découvrir TypeScript, ou si vous en aviez déjà entendu parler, j’espère que cet article vous conforte dans l’idée que TypeScript est “l’avenir” de JavaScript.