Comparatif : de Java à JavaScript / TypeScript

Ce guide présente une comparaison de la syntaxe entre Java (8 minimum) et JavaScript (ES6/ES2015 minimum) / TypeScript.

Vous trouverez d’autres guides et une explication plus générale ici.

Pourquoi TypeScript ? En tant que développeur Java, vous allez adorer, et on vous explique pourquoi ici. Ce guide précise clairement quand une fonctionnalité est propre à TypeScript. Tout le reste est du JavaScript standard.

Déclaration des données

En JavaScript, les variables peuvent être déclarées dans l’espace global et les valeurs sont toujours modifiables. Depuis l’ES6, utilisez uniquement l’instruction let.

L’ES6 a introduit les constantes en JavaScript. Des valeurs complexes peuvent être utilisées et donc manipulées.

Types de données simples

En JavaScript natif, le typage des données est dynamique (une variable peut changer de type à n’importe quel moment), et vous n’avez pas besoin de spécifier le type (il est inféré). TypeScript ajoute un typage explicite et statique. Tous les nombres sont de même type en JavaScript.

En plus de null, JavaScript contient le type undefined, et NaN (Not a Number). Ce sont des erreurs, ne les utilisez donc pas.

Détails sur les chaînes de caractères

Vous pouvez utiliser indifféremment les guillemets simples ou doubles pour les chaînes de caractères. L’ES6 a introduit les template literals : de nouveaux guillemets, les backticks, pour l’interpolation des variables et dans lesquels les sauts de ligne sont autorisés. Evitez la concaténation classique en JavaScript, cela porte à confusion avec les additions et peut aboutir à des erreurs de types.

C’est aussi pratique pour gérer les guillemets simples et doubles dans une même chaîne.

Listes de données

La taille des tableaux est toujours dynamique en JavaScript.

Les hash maps sont appelés des objets en JavaScript, avec des index de type chaîne de caractères.

Comme les objets JavaScript sont comme des instances littérales, TypeScript vous permet d’utiliser les interfaces pour typer les objets.

L’ES6 a introduit de nouveaux types de collections : MapSetWeakMapWeakSet. Vous serez peut-être aussi intéressés par la librairie JavaScript Immutable.

Blocs

Même syntaxe pour les conditions.

Depuis l’ES6, grâce à let, la portée des variables est limitée au bloc en cours.

Les itérations sont simplifiées en ES6. N’indiquez pas le type de value en TypeScript (il est inféré).

Une autre possibilité pour les itérations complexes (avec les valeurs et les index, seulement pour les tableaux).

Fonctions

En JavaScript, vous avez accès aux portées parentes directement.

Pas de surcharge en JavaScript (une fonction ne peut avoir qu’une seule signature), et les paramètres sont toujours facultatifs. L’ES6 a introduit les valeurs par défaut. TypeScript permet de rendre automatiquement les paramètres sans valeur par défaut obligatoires (c’est une différence majeure avec du JavaScript natif).

Vous pouvez aussi avoir un nombre indéfini de paramètres.

Arrow functions

L’ES6 a introduit une syntaxe raccourcie pour les fonctions anonymes, appelée arrow functions. Utilisez-la systématiquement, car elle règle aussi un problème de contexte spécifique à JavaScript.

Méthodes natives

Quelques unes des méthodes de base. Notez que length est une propriété (et non une méthode) en JavaScript.

Quand une fonction semble être appelée directement, comme parseInt(), c’est parce que l’objet global est implicite : window.parseInt()Utilisez le raccourci, étant donné que window n’est pas toujours l’objet global.

Classes

L’ES6 a introduit la syntaxe des classes, pour simplifier la programmation orienté objet en JavaScript. Les propriétés sont déclarées directement dans le constructeur. Les propriétés pré-déclarées et les modificateurs de visibilité apparaîtront dans une prochaine version de JavaScript, mais TypeScript permet de les utiliser dès maintenant.

Lors d’un héritage en JavaScript, l’appel au constructeur parent est obligatoire dans le constructeur fils.

Les getters et setters ont une syntaxe spéciale en JavaScript (mais vous pouvez aussi faire des accesseurs classiques). Ne pré-déclarez pas la propriété, JavaScript le fait automatiquement.

La syntaxe est la même pour les méthodes statiques.

TypeScript ajoute les classes abstraites et les interfaces.

Namespaces

L’encapsulation est gérée directement par le système de chargement depuis l’ES6 : s’il y a l’instruction export ou
l’instruction import, alors vous n’êtes plus en portée globale. Soyez vigilants : l’extension’ .js est nécessaire dans les imports JavaScript, mais en TypeScript, comme vous devrez gérer à la fois des fichiers .ts en développement et des fichiers .js en production, il est préférable de configurer le système de chargement pour ajouter automatiquement la bonne extension.

Revenir au sommaire des guides JavaScript