TypeScript vs JavaScript: comprendre 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 assez 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.

L'introduction de JavaScript côté client dans Netscape Navigator a été rapidement suivie par l'introduction de JavaScript côté serveur dans les serveurs Web Netscape Enterprise Server et Microsoft IIS. Quelque 13 ans plus tard, Ryan Dahl a introduit Node.js comme un environnement d'exécution JavaScript open source, multiplateforme, indépendant de tout navigateur ou serveur Web.

Langage JavaScript

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

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

Avant JavaScript ES6, le langage n'avait pas d'optimisation des appels de fin; 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'est-ce que la désignation «ES6»? Le nom du langage JavaScript normalisé est ECMAScript (ES), après l'organisme de normalisation ECMA International; 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 placer dynamiquement le message d'accueil approprié dans un élément Web nommé trouvé dans l'objet document du navigateur:

var heure = nouvelle date (). getHours ();

var salutation;

if (heure <18) {

  salutation = "Bonne journée";

} autre {

  salutation = "Bonsoir";

}

document.getElementById ("démo"). innerHTML = salutation;

Écosystème JavaScript

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

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, le canevas (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, comme jQuery. Certains, comme Express, sont des cadres d'application à des fins spécifiques; pour Express, le but est de créer des serveurs d'applications Web et mobiles sur Node.js. Un certain nombre d'autres frameworks ont été construits sur Express. En 2016, j'ai discuté de 22 frameworks JavaScript dans un effort pour donner un sens à ce qui devenait quelque chose d'un zoo; beaucoup de ces cadres existent encore sous une forme ou une autre, mais plusieurs ont été laissés de côté.

Il existe de nombreux autres modules JavaScript, plus de 300 000. Pour faire face à cela, nous utilisons des gestionnaires de packages , tels que npm, le gestionnaire de packages 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 se fait appeler 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 les modules JavaScript en actifs statiques pour le navigateur. Browserify permet aux développeurs d'écrire des modules de style Node.js qui se compilent pour être utilisés dans le navigateur. Grunt est un exécuteur de tâches JavaScript orienté fichier, et gulp est un système de construction en continu et un exécuteur de tâches JavaScript. Le choix entre grogner et avaler n'est pas décisif. J'ai à la fois installé et utilisé celui qui a été mis en place pour un projet donné.

Pour fiabiliser le code JavaScript 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 exécuteur de tâches ou de votre IDE. 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'IDE, j'ai passé en revue 6 IDE JavaScript et 10 éditeurs JavaScript, dont le dernier en 2019. Mes principaux choix étaient Sublime Text (éditeur très rapide), Visual Studio Code (éditeur / IDE configurable) et WebStorm (IDE).

Les transpilers vous permettent de traduire d'autres langages tels 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 transpilateur le plus courant pour JavaScript moderne est Babel.

Qu'est-ce que TypeScript?

TypeScript est un sur-ensemble typé de JavaScript qui se compile en JavaScript brut (ES3 ou supérieur; il est configurable). Le compilateur de ligne de commande TypeScript open source peut être installé en tant que package Node.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 compilateur / transpilateur TypeScript tsc 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 framework Angular 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 la refactorisation 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 en évolution, y compris celles d'ECMAScript 2015 et des 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 brut génère des erreurs uniquement lors de l'exécution, et uniquement si votre programme atteint un chemin contenant des erreurs.

Le didacticiel TypeScript en 5 minutes montre clairement les avantages. Le point de départ est du JavaScript pur avec une extension .ts:

fonction d'accueil (personne) {

  retourne "Bonjour," + personne;

}

let user = "Jane User";

document.body.textContent = accueil (utilisateur);

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

Le didacticiel vous propose de modifier ce code étape par étape, en ajoutant une annotation de type person:stringdans la définition de fonction, en compilant, en testant la vérification de type par le compilateur, en ajoutant une interface pour un persontype et enfin en ajoutant une classe pour Student. Le code final est:

élève de la classe {

    fullName: chaîne;

    constructeur (public firstName: string, public middleInitial: string,

        public lastName: chaîne) {

            this.fullName = firstName + "" + middleInitial + "" + lastName;

    }

}

Interface Person {

    firstName: chaîne;

    lastName: chaîne;

}

fonction d'accueil (personne: personne) {

    retourne "Hello", + person.firstName + "" + person.lastName;

}

let user = new Student ("Jane", "M.", "User");

document.body.textContent = accueil (utilisateur);

Lorsque vous compilez ceci et examinez le JavaScript émis, vous verrez que les classes dans 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.firstNameet person.lastNamesont automatiquement générées par le compilateur lorsqu'il voit leurs publicattributs dans le Studentconstructeur de classe, et également transférées vers l' Personinterface. 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:

S'il y a des erreurs dans le code lorsque vous modifiez dans VS Code, vous verrez les messages d'erreur dans l'onglet Problèmes, par exemple les suivants si vous supprimez la fin de la ligne avec l'instanciation de Student:

Le didacticiel Migration à partir 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 vos fichiers .js en .ts un à la fois. (Si votre fichier utilise JSX, une extension utilisée par React, vous devrez le renommer en .tsx plutôt qu'en .ts.) Ensuite, resserrez la vérification des erreurs et corrigez les erreurs.

Entre autres choses, vous devrez changer les instructions basées sur des modules require()ou en define()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' exportinstruction TypeScript . TypeScript prend en charge les modules CommonJS, comme le fait Node.js.

Si vous obtenez des erreurs concernant le nombre incorrect 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. DefinatelyTyped est un référentiel de fichiers de déclaration, tous accessibles en utilisant npm. Vous pouvez trouver les déclarations en utilisant la page TypeSearch.

Une fois que vous avez 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 serez en mesure de 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, TypeScript est un JavaScript évolutif.