Les différences entre ES5, ES2015 (ES6) et Typescript ?

Pour savoir quelle est la différence entre ES5, ES2015 ( ES6 ) et Typescript, commençons par comprendre ce que chacun d’eux sont et pourquoi ils existent.

ECMAScript est un ensemble de normes concernant les langages de programmation de type script et standardisées par Ecma International dans le cadre de la spécification ECMA-262. Il s’agit donc d’un standard, dont les spécifications sont mises en œuvre dans différents langages de script, comme JavaScript ou ActionScript. C’est un langage de programmation orienté prototype.

TypeScript est un sur-ensemble de JavaScript et ES2015 est l’évolution de ES5 mais voyons ca plus en détail.

ECMAScript Edition 5 (ES5)

ES5 est une version d’ecmascript assez ancien sorti en décembre 2009. C’est l’edition javascript que la plupart d’entre nous utilisent depuis des années et fait de lui celui le plus utilisé. Il a l’avantage d’être pris en charge par tous les navigateurs modernes.

L’un des problèmes majeur de ES5 est la difficulté d’identifier les problèmes au moment du développement. Ce qui rend le développement plus compliqué.

Par exemple il n’y a pas la possibilité de savoir quelles propriétés contient un objet dans un autre fichier, ce que peut être un paramètre non valide pour une fonction, ou de savoir lorsque nous utilisons une variable dans une portée incorrecte..

ES2015/ES6

ES2015 est un énorme bond en avant par rapport à ES5. Il ajoute une énorme quantité de fonctionnalités à JavaScript. Ces fonctionnalités résolvent certains des problèmes qui rend la programmation en ES5 difficile. Ils sont facultatifs, car nous pouvons toujours utiliser ES5 dans ES2015 ( rétro-compatible ).

ES6 n’est pas pris en charge par tous les navigateurs mais grace a des outils comme babel il est possible d’écrire son code en ES6 ( voir même plus récents ) et de le transpiler en ES5 afin d’être compatible avec tous les navigateurs.

Exemples de fonctionnalité supplémentaire avec ES6

// ES5
var user = { id: 123, name: 'Jack', age: 35 };
var id = user.id;
var name = user.name;
var age = user.age;
 
// ES6
var user = { id: 123, name: 'Jack', age: 35 };
var {id, name, age} = user;

// Spread operator with objects

// ES5 
var object1 = { a: 1, b: 2 };
var object2 = { c: 3};
var object3 = Object.assign(object1, object2);
 
// ES6
var object1 = { a: 1, b: 2 };
var object2 = {  …object1, c: 3 };

// Spread operator with arrays
 
// ES5
var arr1 = [ 1, 2, 3 ];
var arr2 = [ 3, 4, 5 ];
var arr3 = arr1.concat(arr2);
 
// ES6
var arr1 = [ 1, 2, 3 ];
var arr2 = [ 3, 4, 5 ];
var arr3 [ …arr1, arr2 ];

// ES5
var a = 1;
var b = 2;
var c = 3;
var object1 = { a: a, b:b, c:c };
 
// ES6
let a = 1;
let b = 2;
let c= 3;
let object1 = { a, b, c };

// ES5
console.log('Premiere ligne\n'  +
'Deuxieme ligne');
 
// --Output--
// Premiere ligne
// Deuxieme ligne
 
// ES6
console.log(`Premiere ligne\n
Deuxieme ligne`);
 
// --Output--
// Premiere ligne
// Deuxieme ligne
 
// ES5
var a = 2;
var b = 3;
console.log(a + " + " + b + " = " + (a+ b)); // 2 + 3 = 5
 
// ES6
let a = 2;
let b = 3;
console.log(`${a} + ${b} = ${a + b)}`); // 2 + 3 = 5

TypeScript

TypeScript n’est pas un nouveau langage. Il ne s’éloigne pas de la ligne directrice de JavaScript. Son objectif est de permettre l’utilisation des fonctionnalités des futures versions de JavaScript et de proposer une meilleure expérience de développement.

La valeur ajouté de TypeScript ne réside pas dans l’ajout de fonctionnalité supplémentaire mais dans l’écriture de code plus sûre et efficace. TypesScript permet de rajouter des interfaces et des types sur nos variables, ceux qui permet aux outils de pouvoir identifier les problèmes au moment ou on code et d’avoir de l’autocomplete sur les paramètres, les propriétés, les fonctions, etc…

Nos éditeurs n’ont pas à deviner si nous avons utilisé une fonction correctement ou non. Les informations sont facilement disponibles pour que l’outil nous lève un drapeau rouge afin que nous puissions résoudre les problèmes immédiatement. Dans certains cas, ces outils peuvent également aider à recommander et à refactoriser à notre place!

Pour en apprendre plus sur le javascript je vous recommande le livre « You don’t know JS » de Kyle Simpson.