ECMAScript 6 et TypeScript
La proximit� temporelle entre la version 1.5 alpha de TypeScript (TS) annonc�e r�cemment et la prochaine validation officielle de la norme ECMAScript 6 (ES6) tant attendue, en principe en juin est l'occasion de faire le point sur les fonctionnalit�s ES6 support�es par le langage de Microsoft.
Il existe un site recensant le niveau de compatibilit� avec la norme ES6 des diff�rents navigateurs et transpileurs JavaScript.
Bien entendu, la version 1.5 alpha de TS y est r�f�renc�e, dans la cat�gorie compilateurs/polyfills.
On constate qu'en terme de couverture brute, TS est � 25% � comparer par exemple au 75% de Babel (anciennement 6to5). On est encore loin du compte certes mais contrairement � Babel ou � Traceur qui se veulent de purs transpileurs avec justement pour unique objectif de transpiler en ES5 du code ES6, TS se veut �tre plus qu'un transpileur, mais bien un langage � part enti�re avec des contraintes qui lui sont propres.
On constate d'ailleurs si on consid�re un langage qui comme TS n'est pas uniquement un transpileur, que le taux de couverture brute de Clojure, de 29%, est similaire � celui de TS.
Il faut aussi consid�rer ce taux de couverture de 25% avec quelques pr�cautions dans la mesure o� toutes les fonctionnalit�s ne sont pas d'�gale importance en pratique.
Toujours est-il que ce tableau classe les diff�rentes fonctionnalit�s de la norme ES6 en trois cat�gories : utile, significative et embl�matique (landmark). Focalisons-nous sur cette derni�re cat�gorie, une revue exhaustive �tant beaucoup trop longue pour votre humble serviteur, et regardons la couverture de TS concernant ces fonctionnalit�s dites embl�matiques (m�me s'il faut garder � l'esprit que cette classification reste subjective et propre � ce site).
Syntaxe :
Op�rateur d'expansion (...) : 2/10
L'op�rateur d'expansion (spread) permet d'extraire sous la forme d'une s�quence s�par�e par des virgules, l'ensemble des �l�ments d'une collection.
TS 1.5 supporte le cas le plus �vident, celui avec un tableau.
var x = Math.max(...[1, 2, 3]);
est �quivalent �
var x = Math.max(1, 2, 3);
TS 1.5 ne prend pas en charge les autres cas moins naturels (et moins fr�quents) pr�vus par la norme concernant les cha�nes de caract�res. Il n'est donc pas possible d'utiliser l'op�rateur comme ceci :
var x = Math.max(..."123"]);
TS 1.5 ne prend pas non plus en charge le cas plus g�n�ral des objets it�rables g�n�riques d�finis � l'aide de la fonction global.__createIterableObject().
Extensions des objets litt�ralement d�finis : 5/6
Lorsqu'on d�finissait explicitement un objet {...} , ses propri�t�s ne pouvaient avoir qu'un nom litt�ral, c'est-�-dire �tre un symbole terminal dans le jargon de la th�orie des langages. Par exemple :
1
2
3
| var obj = { a: 1, b: 2 };
obj.a === 1;
obj.b === 2; |
Les propri�t�s a et b de l'objet obj ainsi d�fini sont d�sign�es explicitement par un identificateur. Or, il �tait �galement possible de d�finir les propri�t�s d'un objet avec des noms calcul�s, via une approche dynamique :
1
2
3
4
5
6
7
| var x = 'a';
var y = 'b';
var obj = {};
obj[x] = 1;
obj[y] = 2;
obj.a === 1;
obj.b === 2; |
Avec la norme ES6, cette fronti�re dispara�t et il est possible de d�finir explicitement un objet avec des noms de propri�t�s calcul�es :
1
2
3
4
5
| var x = 'a';
var y = 'b';
var obj = { [x]: 1, [y]: 2 };
obj.a === 1;
obj.b === 2; |
TS 1.5 prend en charge cette nouvelle fonctionnalit�, � l'exception des accesseurs get et set qui eux doivent encore �tre nomm�s avec un litt�ral.
Boucle for..of : 2/7
Cette nouvelle construction de boucle permet d'it�rer sur une collection de fa�on plus pratique qu'avec la construction for..in puisque la variable de contr�le n'est plus la cl� de l'�l�ment it�r� mais bien sa valeur :
1
2
3
4
5
6
| var arr = ['Hello ', 'world! '];
var sentence = '';
for (var item of arr) {
sentence += item;
}
sentence === 'Hello world! '; |
TS 1.5 permet d'utiliser cette nouvelle construction pour it�rer sur des tableaux et des cha�nes de caract�res.
Cependant, cette construction en TS 1.5 ne prend pas encore en charge l'Unicode �tendu (plan astral) ni les objets it�rables g�n�riques.
Interpolation de cha�nes : 2/2
L'interpolation de cha�nes de caract�res permet d'une part de fractionner les cha�nes litt�rales sur plusieurs lignes et permet d'autre part d'exprimer certaines parties d'une cha�ne litt�rale par une expression qui sera �valu�e � l'ex�cution. Cela permet d'am�liorer la lisibilit� du code en limitant l'usage massif de concat�nations, notamment lorsqu'il s'agit de construire du code HTML � la vol�e.
1
2
3
4
| var a = "ba", b = "QUX";
var str = `foo bar
${a + "z"} ${b.toLowerCase()}`
str === "foo bar\nbaz qux"; |
TS 1.5 supporte pleinement cette nouvelle fonctionnalit�.
D�structuration : 20/30
L'affectation par d�composition, ou plus litt�ralement la d�structuration, permet d'�viter l'usage de certaines variables interm�diaires et rend ainsi le code plus lisible lorsqu'il s'agit de manipuler des n-uplets (ou tuples) soit sous la forme de tableaux ou sous la forme de cha�nes de caract�res.
1
2
3
4
5
| var a, b;
[a, b] = [1, 2];
a === 1 && b === 2;
[a, b] = [b, a];
a === 2 && b === 1; |
TS 1.5 supporte cette fonctionnalit� pour l'essentiel, � part les cas li�s aux objets it�rables g�n�riques, au passage en param�tres du constructeur de Function(), et quelques bugs probablement en cours de correction.
Fonctions :
Fonctions anonymes fl�ch�es : 8/11
La notation fl�ch�e permet de simplifier l'�criture des fonctions anonymes dans la mesure o� sa notation est plus concise et o� elle permet la conservation du contexte this de la fonction de port�e lexicale imm�diatement sup�rieure, ce qui �vite l'utilisation intempestive de variables interm�diaires _this ou that ou bien l'abus de bind(). Cette notation fl�ch�e permet aussi la conservation du contexte arguments de la fonction de port�e lexicale imm�diatement sup�rieure.
1
2
3
4
5
6
7
8
9
10
| function AlertMsg1(msg) {
this.msg = msg;
this.timer = setTimeout(function () { alert(this.msg); }, 1000);
}
function AlertMsg2(msg) {
this.msg = msg;
this.timer = setTimeout(() => { alert(this.msg); }, 2000);
}
var a1 = new AlertMsg1('Hello world!'); // undefined
var a2 = new AlertMsg2('Goodbye folks!'); // 'Goodbye folks!' |
TS a support� cette fonctionnalit� tr�s t�t et on la retrouve �videmment dans la version 1.5. Seuls quelques manquements � la norme subsistent comme l'absence de la conservation du contexte arguments ou le fait que cette fonction anonyme fl�ch�e poss�de anormalement une propri�t� prototype.
Classes : 14/23
Les classes sont l'un des piliers de la programmation orient�e objet au sens classique du terme.
1
2
3
4
5
6
7
8
9
| class C {
constructor(a, b) {
this.a = a;
this.b = b;
}
}
c = new C(1, 2);
c.a === 1;
c.b === 2; |
TS a int�gr� les classes depuis ses d�buts, cela a m�me �t� une de ses motivations premi�res, dans la mesure o� la notion de classe s'inscrit dans la notion plus g�n�rale des types. La version 1.5 de TS a encore quelques lacunes par rapport � la norme ES6 comme la possibilit� d'imbriquer des classes ou la notion de classe anonyme.
G�n�rateurs : 0/21
Les g�n�rateurs sont une possibilit� offerte par la norme ES6 de faciliter le multit�che coop�ratif � l'aide de fonctions dites g�n�ratrices et du mot-cl� yield.
1
2
3
4
5
6
7
8
9
10
11
| function* coop(){
var index = 0;
while (index <= 2)
yield index++;
};
var iterator = coop();
iterator.next().value === 0;
iterator.next().value === 1;
iterator.next().value === 2;
iterator.next().value === undefined; |
TS 1.5 n'impl�mente pas encore cette fonctionnalit�. Elle est pr�vue dans la version suivante, la 1.6.
Pr�d�finitions :
Tableaux typ�s : 0/40
Les tableaux typ�s sont une fonctionnalit� de la norme ES6 permettant des optimisations lorsqu'il s'agit de manipuler de grandes quantit�s de donn�es, souvent de m�me nature ou de m�me format, pr�d�termin� � l'avance.
TS 1.5 ne supporte cette fonctionnalit� qu'en ciblant du code ES6. Il ne peut pas transpiler cette construction en code ES5 pour le moment.
Proxy : 0/20
Les proxy g�n�ralisent le concept d'accesseur en permettant de personnaliser le comportement d'un objet lors des acc�s � ses propri�t�s ou lors de son instanciation via l'op�rateur new.
TS 1.5 ne supporte cette fonctionnalit� qu'en ciblant du code ES6. Il ne peut pas transpiler cette construction en code ES5 pour le moment.
Promesses : 0/3
Les promesses sont un design pattern assez commode pour simplifier la programmation asynchrone, surtout lorsqu'il s'agit de traiter non pas un �v�nement mais une collection d'�v�nements.
TS 1.5 ne supporte cette fonctionnalit� qu'en ciblant du code ES6. Il ne peut pas transpiler cette construction en code ES5 pour le moment. Les promesses seront � l'ordre du jour dans la version 1.6 en parall�le des constructions async/await.
Conclusion
Ce petit tour d'horizon de la couverture ES6 de TS n'est �videmment pas exhaustif puisque les fonctionnalit�s class�es en utiles et significatives n'ont pas �t� abord�es.
Il faut de plus garder � l'esprit que TS n'est pas un transpileur pur mais un langage � part enti�re qui en plus des fonctionnalit�s ES6 qu'il int�grera � terme, propose d'autres concepts et notamment le typage (annotations de type, unions de types, interfaces, ...).
Cela n'a donc pas vraiment de sens d'opposer ES6 � TS comme il est parfois possible de lire en se promenant sur la toile. ES6 ne va pas rendre TS obsol�te, tout comme TS n'a pas vocation � remplacer ES6.
Enfin, concernant la couverture de la norme ES6 par TS, m�me si toutes les fonctionnalit�s peuvent ne pas �tre transpil�es en fin de compte en ES5, la mise � la norme des navigateurs rendra ce besoin moins crucial au fur et � mesure que le temps s'�coulera. Il ne faut donc pas faire du tableau de couverture fonctionnelle le crit�re absolu de l'alignement de TypeScript avec la norme ES6.
ECMAScript 6 et TypeScript
R�pondre avec citation
Partager