TypeScript vs JavaScript: Comprenez les différences

Le world wide web fonctionne essentiellement sur JavaScript, HTML et CSS. Malheureusement, JavaScript manque de plusieurs fonctionnalités qui aideraient les développeurs à l’utiliser pour des applications à grande échelle. Entrez TypeScript.

Qu’est-ce que JavaScript ?

JavaScript a commencé comme un langage de script pour le navigateur Web Netscape Navigator ; Brendan Eich a écrit le prototype sur une période de 10 jours en 1995. Le nom JavaScript est un clin d’œil au langage Java de Sun Microsystem, bien que les deux langages soient très différents, et la similitude des noms a conduit à une confusion importante au fil des ans. JavaScript, qui a considérablement évolué, est désormais pris en charge sur tous les navigateurs Web modernes.

Langage JavaScript

JavaScript est un langage multi-paradigme. Il a une syntaxe à crochets et des points-virgules, comme la famille de langages C. Il a un typage faible et dynamique et est interprété ou (plus souvent) compilé juste à temps. En général, JavaScript est mono-thread, bien qu’il existe une API Web Workers qui effectue le multithreading, et il existe des événements, des appels de fonctions asynchrones et des rappels.

JavaScript prend en charge la programmation orientée objet en utilisant des prototypes plutôt que l’héritage de classe utilisé en C++, Java et C#, bien qu’une syntaxe class ait été ajoutée à JavaScript ES6 en 2015. JavaScript prend également en charge la programmation fonctionnelle, y compris les fermetures, la récursivité et les lambdas (fonctions anonymes).

Avant JavaScript ES6, le langage n’avait pas d’optimisation des appels de queue; maintenant, c’est le cas, bien que vous deviez activer le mode strict ('use strict') pour l’activer, et l’implémentation varie d’un navigateur à l’autre. Le mode strict modifie également la sémantique de JavaScript et modifie certaines erreurs normalement silencieuses pour générer des erreurs.

Qu’y a-t-il avec la désignation « ES6 »? Le nom du langage JavaScript standardisé est ECMAScript (ES), d’après l’organisme international de normalisation ECMA ; ES6 est également appelé ECMAScript 2015 (ES2015). ES2020 est actuellement un projet de norme.

À titre d’exemple simple pour vous donner la saveur du langage JavaScript, voici un code pour décider si c’est le jour ou le soir et mettre dynamiquement le message d’accueil approprié dans un élément web nommé trouvé dans l’objet document du navigateur:

var hour = new Date().getHours();
var greeting;
if (hour < 18) {
greeting = "Good day";
} else {
greeting = "Good evening";
}
document.getElementById("demo").innerHTML = greeting;

Ecosystème JavaScript

Il existe de nombreuses API JavaScript. Certains sont fournis par le navigateur, comme l’API document dans le code ci-dessus, et d’autres sont fournis par des tiers. Certaines API s’appliquent à l’utilisation côté client, certaines à l’utilisation côté serveur, d’autres à l’utilisation du bureau et d’autres à plusieurs environnements.

Les API de navigateur incluent le modèle d’objet de document (DOM) et le modèle d’objet de navigateur (BOM), la géolocalisation, Canvas (graphiques), WebGL (graphiques accélérés par GPU), HTMLMediaElement (audio et vidéo) et WebRTC (communications en temps réel).

Les API tierces abondent. Certains sont des interfaces vers des applications complètes, telles que Google Maps. D’autres sont des utilitaires qui facilitent la programmation JavaScript HTML5 et CSS, tels que jQuery. Certains, comme Express, sont des frameworks d’applications à des fins spécifiques ; pour Express, le but est de construire des serveurs d’applications Web et mobiles sur Node.js. Un certain nombre d’autres cadres ont été construits sur Express. En 2016, j’ai discuté de 22 frameworks JavaScript dans le but de donner un sens à ce qui devenait quelque chose d’un zoo ; beaucoup de ces frameworks existent toujours sous une forme ou une autre, mais plusieurs sont passés au bord du chemin.

Il y a beaucoup plus de modules JavaScript, plus de 300 000. Pour faire face à cela, nous utilisons des gestionnaires de paquets, tels que npm, le gestionnaire de paquets par défaut pour Node.js.

Une alternative à npm est Yarn, qui vient de Facebook, et revendique l’avantage des installations déterministes. Des outils similaires incluent Bower (de Twitter), qui gère les composants frontaux plutôt que les modules Node; Ender, qui s’appelle la petite sœur de npm; et jspm, qui utilise des modules ES (la nouvelle norme ECMA pour les modules), plutôt que des modules CommonJS, l’ancienne norme de facto prise en charge par npm.

Webpack regroupe des modules JavaScript en actifs statiques pour le navigateur. Browserify permet aux développeurs d’écrire un nœud.modules de style js qui compilent pour une utilisation dans le navigateur. Grunt est un coureur de tâches JavaScript orienté fichier, et gulp est un système de génération en continu et un coureur de tâches JavaScript. Le choix entre grognement et gorgée n’est pas décisif. J’ai à la fois installé et utilisé celui qui a été configuré pour un projet donné.

Pour rendre le code JavaScript plus fiable en l’absence de compilation, nous utilisons des linters. Le terme vient de l’outil lint en langage C, qui était un utilitaire Unix standard. Les linters JavaScript incluent JSLint, JSHint et ESLint. Vous pouvez automatiser l’exécution des linters après les modifications de code à l’aide d’un coureur de tâches ou de votreE. Encore une fois, le choix parmi les linters n’est pas clair, et j’utilise celui qui a été configuré pour un projet donné.

En parlant d’éditeurs et d’Es, j’ai passé en revue 6 ID JavaScript et 10 éditeurs JavaScript, le plus récemment en 2019. Mes meilleurs choix étaient Sublime Text (éditeur très rapide), Visual Studio Code (éditeur configurable /E) et WebStorm (ID).Les transpileurs

vous permettent de traduire d’autres langues telles que CoffeeScript ou TypeScript en JavaScript, et de traduire du JavaScript moderne (tel que le code ES2015) en un JavaScript de base qui s’exécute dans (presque) n’importe quel navigateur. (Tous les paris sont ouverts pour les premières versions d’Internet Explorer.) Le transpileur le plus courant pour JavaScript moderne est Babel.

Qu’est-ce que TypeScript ?

TypeScript est un surensemble typé de JavaScript qui se compile en JavaScript simple (ES3 ou supérieur; il est configurable). Le compilateur de ligne de commande open source TypeScript peut être installé en tant que nœud.paquet js. La prise en charge de TypeScript est fournie avec Visual Studio 2017 et Visual Studio 2019, Visual Studio Code et WebStorm, et peut être ajoutée à Sublime Text, Atom, Eclipse, Emacs et Vim. Le tsc du compilateur/transpileur TypeScript est écrit en TypeScript.

TypeScript ajoute des types, classes et modules facultatifs à JavaScript, et prend en charge les outils pour les applications JavaScript à grande échelle pour n’importe quel navigateur, pour n’importe quel hôte, sur n’importe quel système d’exploitation. Parmi de nombreuses autres victoires pour TypeScript, le cadre angulaire populaire a été remanié dans TypeScript.Les types

permettent aux développeurs JavaScript d’utiliser des outils et des pratiques de développement hautement productifs tels que la vérification statique et le refactoring de code lors du développement d’applications JavaScript.Les types

sont facultatifs et l’inférence de type permet à quelques annotations de type de faire une grande différence dans la vérification statique de votre code. Les types vous permettent de définir des interfaces entre les composants logiciels et d’obtenir des informations sur le comportement des bibliothèques JavaScript existantes.

TypeScript prend en charge les fonctionnalités JavaScript les plus récentes et évolutives, y compris celles d’ECMAScript 2015 et les propositions futures, telles que les fonctions asynchrones et les décorateurs, pour aider à créer des composants robustes.

Langage TypeScript

Le langage TypeScript accepte JavaScript comme valide, mais offre les options supplémentaires d’annotations de type, de vérification de type au moment de la compilation, de classes et de modules. Tous ces éléments sont extrêmement utiles lorsque vous essayez de produire un logiciel robuste. Le JavaScript simple ne génère des erreurs qu’au moment de l’exécution, et uniquement si votre programme atteint un chemin avec des erreurs.

Le tutoriel Dactylographié en 5 minutes rend les avantages clairs. Le point de départ est du JavaScript pur avec un.extension ts:

function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.textContent = greeter(user);

Si vous compilez cela avec tsc, cela produira un fichier identique avec a.extension js.

Le tutoriel vous permet de modifier ce code par étapes, en ajoutant une annotation de type person:string dans la définition de la fonction, en compilant, en testant la vérification de type par le compilateur, en ajoutant une interface pour un type person et enfin en ajoutant une classe pour Student. Le code final est:

class Student {
fullName: string;
constructor(public firstName: string, public middleInitial: string,
public lastName: string) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
}
function greeter(person: Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

Lorsque vous compilez cela et regardez le JavaScript émis, vous verrez que les classes de TypeScript ne sont qu’un raccourci pour le même héritage basé sur un prototype qui est utilisé dans JavaScript ES3. Notez que les propriétés person.firstName et person.lastName sont automatiquement générées par le compilateur lorsqu’il voit leurs attributs public dans le constructeur de classe Student, et également reportées sur l’interface Person. L’un des plus beaux avantages des annotations de type dans TypeScript est qu’elles sont reconnues par les outils, tels que Visual Studio Code:

IDG

S’il y a des erreurs dans le code lors de la modification dans VS Code, vous verrez les messages d’erreur dans l’onglet Problèmes, par exemple ce qui suit si vous supprimez la fin de la ligne avec l’instanciation de Student:

IDG

Le tutoriel Migration de JavaScript explique en détail comment mettre à niveau un projet JavaScript existant. En sautant les étapes de configuration, le nœud de la méthode est de renommer votre.fichiers js à.ts un à la fois. (Si votre fichier utilise JSX, une extension utilisée par React, vous devrez le renommer en.tsx plutôt que.ts.) Puis resserrez la vérification des erreurs et corrigez les erreurs.

Entre autres choses, vous devrez changer les instructions require() ou define() basées sur des modules en instructions d’importation TypeScript et ajouter des fichiers de déclaration pour tous les modules de bibliothèque que vous utilisez. Vous devez également réécrire vos exportations de module à l’aide de l’instruction TypeScript export. TypeScript prend en charge les modules CommonJS, comme Node.js le fait.

Si vous obtenez des erreurs sur le mauvais nombre d’arguments, vous pouvez écrire des signatures de surcharge de fonction TypeScript. C’est une fonctionnalité importante qui manque à JavaScript. Enfin, vous devez ajouter des types à vos propres fonctions et, le cas échéant, utiliser des interfaces ou des classes.

Vous n’avez généralement pas besoin d’écrire vos propres fichiers de déclaration pour les bibliothèques JavaScript du domaine public. DefinitelyTyped est un référentiel de fichiers de déclaration, tous accessibles à l’aide de npm. Vous pouvez trouver les déclarations à l’aide de la page de recherche de types.

Une fois que vous aurez converti tous vos fichiers JavaScript en TypeScript, renforcé les types et éliminé les erreurs, vous aurez une base de code beaucoup plus robuste. Au lieu de corriger constamment les erreurs d’exécution signalées par les testeurs ou les utilisateurs, vous pourrez détecter les erreurs les plus courantes de manière statique.

Cela vaut la peine de regarder Anders Hejlsberg discuter de TypeScript. Comme vous l’entendrez de lui, TypeScript est JavaScript qui évolue.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.