TypeScript vs JavaScript

Si JavaScript est aujourd’hui un des langages les plus utilisés par les développeurs freelances, il fait face à un concurrent qui pourrait bien le dépasser d’ici quelques années : TypeScript !

Vous voulez en savoir plus sur ce nouveau langage de Microsoft ? Vous commencez un projet et hésitez entre ces deux langages ? Comparons-les dans cet article !

JavaScript, le langage du web

Historique

JavaScript a été créé en 1995 par l’informaticien américain Brendan Eich. À l’origine, c’était un langage côté serveur qui était développé, LiveScript. Mais Netscape, l’entreprise pour laquelle travaillait l’ingénieur, travaillait en parallèle sur une version client (ou front-end) du langage. C’est cette version qui sortira en 1995.

Et c’est seulement quelques jours avant sa sortie que le langage change de nom, pour devenir JavaScript. La raison est que Netscape était partenaire de Sun Microsystems (à qui on doit Java), et ce renommage servait les deux intérêts.

La proximité des noms des langages JavaScript et Java (qui sont pourtant très différents) a d’ailleurs créé une certaine confusion auprès du grand public, qui perdure toujours aujourd’hui.

Les utilisations de JavaScript

Le langage script du web

Avec HTML et CSS, JavaScript est le troisième langage du web. C’est là son utilisation première et celle qui le rend indispensable au développement web : c’est le langage qui dynamise les sites.

C’est en effet JavaScript qui permet de créer des interactions avec l’utilisateur, de valider des formulaires côté client, de communiquer avec un serveur, etc.

Ce langage est interprété (et non compilé, à la différence de TypeScript, comme nous l’expliquerons) par le navigateur web, au travers d’un moteur JavaScript.

Les frameworks front-end

Si JavaScript s’utilisait à l’origine tel quel (ce qu’on appelle maintenant du Vanilla JS), on préfère aujourd’hui son utilisation au travers de frameworks.

Avec JavaScript, il y en a trois principaux :

• React ;
• Vue.js ;
• Angular.

Il en existe également d’autres, moins connus. Nous pouvons par exemple citer Svelte, framework auquel nous avons consacré un article complet.

Autre utilisations

Mais JavaScript ne s’utilise pas uniquement pour dynamiser un site web ! Devant son succès et sa simplicité d’apprentissage, d’autres cas d’utilisation ont été développés. Il est maintenant possible de faire en JavaScript :

• Du développement back-end (serveur), avec Node.js ;
• Du développement mobile, avec par exemple Cordova, React ou les Progressive Web App ;
• Ou encore du développement logiciel, avec Electron.

Si vous voulez vraiment tout savoir sur le JavaScript, nous avons écrit un article 100% dédié à ce langage JavaScript !

TypeScript, le nouveau venu

Historique

TypeScript est un langage né de Microsoft en 2012. Cette année, et après 2 ans de développement, l’entreprise rend publique cette techno dans sa version 0.8.

Ce langage a été créé dans le but de combler les défauts de JavaScript, plus spécifiquement lorsqu’il est utilisé pour de gros projets. TypeScript a notamment été développé pour ajouter au JS la notion de typage, inexistante dans JavaScript, et qui provoque parfois des bugs difficiles à détecter.

TypeScript est encore peu utilisé comparé à son parent, mais son utilisation s’étend de plus en plus. Il est même parfois un prérequis dans les projets de développement web !

Le fonctionnement de TypeScript

Nous avons rapidement défini ce qu’était TypeScript, mais rentrons un peu plus dans les détails techniques.

Ce langage, contrairement à JavaScript, n’est pas interprété, mais compilé. Plus exactement, il est trans-compilé (ou traduit) en JavaScript, pour ensuite être interprété par le navigateur comme du JavaScript classique.

Techniquement, il apporte plusieurs fonctionnalités importantes au JavaScript. Citons par exemple :

• typage statique ;
• typage dynamique ;
• interfaces ;
• modules ;
• paramètres optionnels ;
• énumérations.

Même si JavaScript intègre petit à petit certaines de ces fonctionnalités (via les évolutions d’ECMAScript, les normes que JavaScript suit) ; ce n’est pas le cas et ce ne sera pas le cas de toutes.

Par exemple, le typage est propre à TypeScript (c’est même dans son nom !) et ne sera probablement jamais intégré à JavaScript, du moins pas sous cette forme.

Et c’est l’ensemble de ces apports qui fait de TypeScript un langage intéressant, encore plus pour les projets importants et les grosses équipes. Typer fortement des variables ou des objets permet d’éviter des erreurs de compatibilité et augmente la clarté du code.

Nous montrerons quelques exemples de ces particularités plus loin dans cet article.

Les utilisations de TypeScript

TypeScript peut remplacer du JavaScript presque partout. C’est-à-dire qu’on peut utiliser TypeScript dans l’immense majorité des cas où il y a du JavaScript, que cela soit dans un projet simple comme avec un gros framework.

Même les frameworks front end supportent maintenant le langage Microsoft. Vous pouvez en effet très bien utiliser Typescript avec Angular, Vue ou React. TypeScript est même le langage utilisé par défaut avec Angular.

Installer et utiliser TypeScript

Pour pouvoir comparer deux technos, il est important de les essayer. Nous allons maintenant vous expliquer comment installer et utiliser TypeScript pour pouvoir créer vos premiers projets !

L’installation de TypeScript se fait au travers d’un package. Par exemple avec npm :

npm install -g typescript

Une fois cela fait, lorsque vous voulez créer un projet utilisant TypeScript, il faudra créer, à la racine du répertoire, le fichier de configuration tsconfig.json. Ce fichier contient toutes les informations techniques du projet, notamment ce qui concerne la compilation. Pour avoir plus d’informations sur ce fichier de configuration, rendez-vous sur la documentation officielle.

Ensuite, il ne vous reste plus qu’à créer des fichiers TypeScript (dont l’extension est .ts) et à coder votre application web !

Pour la compilation, à la main, il faudra utiliser la ou les commandes suivantes à la racine de votre projet :

# Transpile le fichier TS index.ts en fichier JS index.js
tsc index.ts

# Transpile tous les fichiers du dossier src
tsc src/*.ts

Il existe également des options à cette commande, notamment liées à ce que vous aurez défini dans le fichier de configuration TypeScript.

Bon à savoir : toutes ces étapes, de création de fichier de configuration et de transpilation, sont automatisées lorsque vous utilisez un framework ; vous n’aurez rien à faire.

JavaScript VS Typescript

Vous commencez un nouveau projet, avec ou sans framework, et hésitez à utiliser JavaScript ou TypeScript ? Nous allons tenter de vous aider à choisir.

Même s’il n’y a pas réellement de bonne réponse (le choix des technos étant à la fois objectif et subjectif : un CTO se base sur son expérience mais aussi sur ses recherches pour choisir une stack), il y a des cas où il vaut mieux utiliser l’un ou l’autre.

JavaScript est recommandé pour les projets sans framework, les petits projets. Par exemple, un simple site vitrine qui ne nécessite du JavaScript que pour la validation et l’envoi d’un formulaire n’aura pas besoin de TypeScript. Cela serait même une perte de temps, notamment au niveau de la transpilation. Les risques d’erreurs syntaxiques sont très faibles.

En revanche, pour les gros projets, ou pour les projets avec des équipes importantes, TypeScript peut être une meilleure option. Notamment grâce au typage.

En effet, sur de gros projets, avec beaucoup d’interactions dans le code, et entre le code et la base de données, avoir un typage fort ajoute un niveau de sécurité important. La création de type, notamment via les interfaces, vient encore plus renforcer ce niveau de sécurité.

Exemples de différences par le code

La meilleure façon de se rendre compte de la différence entre deux langages de programmation, c’est encore de voir des exemples ! Voyons donc ensemble des morceaux de code, pour comprendre la syntaxe de TypeScript et ce qui le différencie de JavaScript.

Voici un exemple du fonctionnement du typage :

// En JavaScript => fonctionne
let maVar = "Hello";
maVar = 10;

// en TypeScript => ne fonctionne pas
let maVar: string = "Hello";
maVar = 10;

Dans le cas de JavaScript, tout se passe bien. On peut donner en valeur une chaine de caractères à une variable, puis lui attribuer un nombre. Avec TypeScript, comme nous le voyons, un type est défini à la variable ; le type string. Et comme dans les autres langages de programmation typés, assigner un number à une string ne fonctionnera pas ; le compilateur renverra une erreur.

De même, TypeScript introduit la notion d’enum, que l’on déclare de la façon suivante :

enum Couleur { Blue = 1, Red = 2, Green = 3 };

Avec ce langage typé, nous pouvons écrire des interfaces, qui servent notamment à créer des types personnalisés, pour une validation encore plus forte et une meilleure organisation du code.

Voici un exemple tiré de la documentation TypeScript :

interface SquareConfig {
  color?: string;
  width?: number;
}
 
function createSquare(config: SquareConfig): { color: string; area: number } {
  let newSquare = { color: "white", area: 100 };

  if (config.color) {
    newSquare.color = config.color;
  }

  if (config.width) {
    newSquare.area = config.width * config.width;
  }

  return newSquare;
}

Quel langage choisir si vous ne connaissez aucun des deux ?

Si vous souhaitez apprendre un langage de programmation qui permet de faire ce que font JavaScript et TypeScript, peut-être vous posez-vous la question de savoir lequel choisir ?

Si vous ne connaissez aucun langage de programmation, nous vous conseillons de commencer par JavaScript, qui sera beaucoup plus simple à comprendre.

En revanche, si vous avez déjà de l’expérience en programmation, et encore plus dans un langage typé, vous pouvez commencer directement avec TypeScript. Un rapide passage par JavaScript est tout de même conseillé.

Conclusion

Nous l’avons vu, TypeScript est un langage relativement récent, basé sur JavaScript, et trans-compilé en JavaScript. Ce qui fait de ces langages deux technos très proches, malgré des différences syntaxiques importantes.

Si JavaScript est plutôt conseillé pour les projets simples et sans beaucoup d’évolutions, TypeScript est lui plutôt recommandé lorsqu’on travaille sur d’importants projets !

Et vous, quel serait votre choix, entre JavaScript et TypeScript ? Expliquez-nous pourquoi en commentaire !