Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

4.2. Les classes avec TypeScript

Nous allons faire une petite expérience intéressante. Nous allons créer une classe vide, et nous allons la transcompiler vers ES5, puis vers ES6. Créer donc un fichier test.ts quelque part sur votre ordinateur, et ajoutez-y le code TypeScript suivant :

// test.ts 
class Test {}

Maintenant, nous allons compiler ce code vers du JavaScript ES5, c’est-à-dire vers une spécification de JavaScript qui ne supporte pas encore le mot-clé class. Pour cela, exécutons la commande TypeScript que nous avons déjà vu, mais en rajoutant une option pour demander explicitement à TypeScript de compiler vers du ES5 :

tsc --t ES5 test.ts

Maintenant, si vous allez jeter un coup d’œil au fichier test.js qui vient d’être généré par TypeScript, voici ce que vous trouverez à l’intérieur :

// Ma classe en ES5 (test.js) 
var Test = (function () { 
 function Test() { 
 } 
 return Test; 
}());

Mais, c’est une classe ça ???

Et bien d’une certaine manière, oui ! Vous avez sous les yeux une classe, mais avec la syntaxe d’ES5. Vous y reconnaîtrez une IIFE.

IIFE : Immediately-invoked Function Expression. Ce sont des fonctions qui s’exécutent immédiatement, et dans un contexte privé.

Essayons maintenant de compiler le même code, mais vers ES6 :

tsc --t ES6 test.ts

Si vous affichez maintenant le code généré dans test.js :

// Ma classe en ES6 (test.js) 
class Test { 
}

Mais, on est revenu au point de départ, non ? C’est exactement le code TypeScript qu’on avait au début !

Oui, vous avez raison, et c’est parfaitement normal. Vous savez pourquoi ? Parce qu’ES6 supporte parfaitement les classes, comme nous l’avons vu dans le chapitre précédent. Comme TypeScript et ES6 supportent les classes, et bien vous ne voyez pas de différences ! 😀