Pouvez-vous décrire le langage TypeScript?

Que peut-il faire que JavaScript ou les bibliothèques disponibles ne peuvent pas faire, cela me donnerait une raison de le considérer?

À l'origine, j'ai écrit cette réponse lorsque TypeScript était encore chaud. Cinq ans plus tard, c'est un bon aperçu, mais regardez la réponse de Lodewijk ci-dessous pour plus de profondeur

Vue à 1000 pieds ...

TypeScript est un sur-ensemble de JavaScript qui fournit principalement un typage statique facultatif, des classes et des interfaces. L'un des grands avantages est de permettre aux IDE de fournir un environnement plus riche pour repérer les erreurs courantes lorsque vous tapez le code .

Pour avoir une idée de ce que je veux dire, regardez la vidéo d'introduction de Microsoft sur la langue.

Pour un grand projet JavaScript, l'adoption de TypeScript peut donner lieu à un logiciel plus robuste, tout en étant déployable là où une application JavaScript standard s'exécuterait.

C'est open source, mais vous n'obtenez l'intelligent Intelligent que lorsque vous tapez si vous utilisez un IDE pris en charge. Au départ, ce n'était que Visual Studio de Microsoft (également noté dans le billet de blog de Miguel de Icaza ). De nos jours, d' autres IDE offrent également la prise en charge de TypeScript .

Existe-t-il d'autres technologies similaires?

Il y a CoffeeScript , mais cela sert vraiment un objectif différent. À mon humble avis, CoffeeScript offre une lisibilité pour les humains, mais TypeScript offre également une lisibilité approfondie des outils grâce à sa saisie statique facultative (voir ce récent article de blog pour un peu plus de critiques). Il y a aussi Dart mais c'est un remplacement complet de JavaScript (bien qu'il puisse produire du code JavaScript )

Exemple

À titre d'exemple, voici du TypeScript (vous pouvez jouer avec celui-ci dans le TypeScript Playground )

class Greeter {
    greeting: string;
    constructor (message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}  

Et voici le JavaScript qu'il produirait

var Greeter = (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
})();

Remarquez comment le TypeScript définit le type des variables membres et des paramètres de méthode de classe. Ceci est supprimé lors de la traduction en JavaScript, mais utilisé par l'EDI et le compilateur pour détecter les erreurs, comme passer un type numérique au constructeur.

Il est également capable d'inférer des types qui ne sont pas explicitement déclarés, par exemple, il déterminerait la greet() méthode renvoie une chaîne.

Débogage de TypeScript

De nombreux navigateurs et IDE offrent un support de débogage direct via des sourcemaps. Consultez cette question de débordement de pile pour plus de détails: débogage de code TypeScript avec Visual Studio

Vouloir en savoir davantage?

À l'origine, j'ai écrit cette réponse lorsque TypeScript était encore chaud. Consultez la réponse de Lodewijk à cette question pour plus de détails actuels.

Relation de TypeScript avec JavaScript

TypeScript est un sur-ensemble typé de JavaScript qui se compile en JavaScript simple - typescriptlang.org .

JavaScript est un langage de programmation développé par le comité technique 39 de l' EMCA , qui est un groupe de personnes composé de nombreuses parties prenantes différentes. TC39 est un comité hébergé par l' ECMA : un organisme de normalisation interne. JavaScript a de nombreuses implémentations différentes par de nombreux fournisseurs différents (par exemple Google, Microsoft, Oracle, etc.). Le but de JavaScript est d'être la lingua franca du web.

TypeScript est un sur-ensemble du langage JavaScript qui a un seul compilateur open-source et est développé principalement par un seul fournisseur: Microsoft. L'objectif de TypeScript est d'aider à détecter les erreurs tôt dans un système de type et de rendre le développement JavaScript plus efficace.

Essentiellement, TypeScript atteint ses objectifs de trois manières:

1. Prise en charge des fonctionnalités JavaScript modernes - Le langage JavaScript (pas le runtime) est normalisé par le biais des normes ECMAScript . Tous les navigateurs et runtimes JavaScript ne prennent pas en charge toutes les fonctionnalités de toutes les normes ECMAScript (voir cette présentation ). TypeScript permet l'utilisation de la plupart des dernières fonctionnalités ECMAScript et les traduit en anciennes cibles ECMAScript de votre choix (voir la liste des cibles de compilation sous l' --targetoption du compilateur). Cela signifie que vous pouvez utiliser en toute sécurité de nouvelles fonctionnalités, comme les modules, les fonctions lambda, les classes, l'opérateur de diffusion et la déstructuration, tout en restant rétrocompatible avec les anciens navigateurs et les exécutions JavaScript.

2. Système de type avancé - Le support de type ne fait pas partie de la norme ECMAScript et ne sera probablement jamais dû à la nature interprétée au lieu de la nature compilée de JavaScript. Le système de type de TypeScript est incroyablement riche et comprend: interfaces, énumérations, types hybrides, génériques, types d'union / intersection, modificateurs d'accès et bien plus encore. Le site officiel de TypeScript donne un aperçu de ces fonctionnalités. Le système de typage de Typescript est comparable à la plupart des autres langages typés et, dans certains cas, sans doute plus puissant.

3. Prise en charge des outils de développement - Le compilateur de TypeScript peut s'exécuter en tant que processus d'arrière-plan pour prendre en charge à la fois la compilation incrémentielle et l'intégration IDE de sorte que vous puissiez plus facilement naviguer, identifier les problèmes, inspecter les possibilités et refactoriser votre base de code.

Relation entre TypeScript et les autres langages de ciblage JavaScript

TypeScript a une philosophie unique par rapport aux autres langages qui se compilent en JavaScript. Le code JavaScript est un code TypeScript valide; TypeScript est un sur-ensemble de JavaScript. Vous pouvez presque renommer vos .jsfichiers en .tsfichiers et commencer à utiliser TypeScript (voir "Interopérabilité JavaScript" ci-dessous). Les fichiers TypeScript sont compilés en JavaScript lisible, de sorte que la migration est possible et comprendre le TypeScript compilé n'est pas difficile du tout. TypeScript s'appuie sur les succès de JavaScript tout en améliorant ses faiblesses.

D'une part, vous disposez d'outils à l'épreuve du temps qui prennent les normes ECMAScript modernes et les compilent vers les versions JavaScript plus anciennes, Babel étant la plus populaire. D'un autre côté, vous avez des langages qui peuvent totalement différer de JavaScript qui ciblent JavaScript, comme CoffeeScript, Clojure, Dart, Elm, Haxe, Scala.js et bien d'autres encore (voir cette liste). Ces langages, bien qu'ils soient meilleurs que là où l'avenir de JavaScript pourrait jamais conduire, courent un plus grand risque de ne pas trouver suffisamment d'adoption pour garantir leur avenir. Vous pourriez également avoir plus de mal à trouver des développeurs expérimentés pour certaines de ces langues, bien que celles que vous trouverez peuvent souvent être plus enthousiastes. L'interopérabilité avec JavaScript peut également être un peu plus complexe, car ils sont plus éloignés de ce qu'est réellement JavaScript.

TypeScript se situe entre ces deux extrêmes, équilibrant ainsi le risque. TypeScript n'est pas un choix risqué par aucune norme. Il faut très peu d'efforts pour s'y habituer si vous êtes familier avec JavaScript, car ce n'est pas un langage complètement différent, a une excellente prise en charge de l'interopérabilité JavaScript et a été beaucoup adopté récemment.

Saisie facultative statique et inférence de type

JavaScript est typé dynamiquement. Cela signifie que JavaScript ne sait pas de quel type est une variable jusqu'à ce qu'elle soit réellement instanciée au moment de l'exécution. Cela signifie également qu'il peut être trop tard. TypeScript ajoute la prise en charge des types à JavaScript. Les bogues causés par de fausses hypothèses selon lesquelles certaines variables sont d'un certain type peuvent être complètement éliminés si vous jouez correctement vos cartes (la sévérité avec laquelle vous tapez votre code ou si vous tapez votre code dépend de vous).

TypeScript rend la frappe un peu plus facile et beaucoup moins explicite par l'utilisation de l'inférence de type. Par exemple: var x = "hello"dans TypeScript est le même que var x : string = "hello". Le type est simplement déduit de son utilisation. Même si vous ne tapez pas explicitement les types, ils sont toujours là pour vous éviter de faire quelque chose qui, sinon, entraînerait une erreur d'exécution.

TypeScript est facultativement tapé par défaut. Par exemple, function divideByTwo(x) { return x / 2 }est une fonction valide dans TypeScript qui peut être appelée avec n'importe quel type de paramètre, même si l'appel avec une chaîne entraînera évidemment une erreur d' exécution . Tout comme vous en avez l'habitude en JavaScript. Cela fonctionne, car quand aucun type n'a été explicitement attribué et que le type n'a pas pu être déduit, comme dans l'exemple divideByTwo, TypeScript affectera implicitement le type any. Cela signifie que la signature de type de la fonction divideByTwo devient automatiquement function divideByTwo(x : any) : any. Il y a un drapeau du compilateur pour interdire ce comportement: --noImplicitAny. L'activation de cet indicateur vous donne un plus grand degré de sécurité, mais signifie également que vous devrez faire plus de frappe.

Les types ont un coût qui leur est associé. Tout d'abord, il y a une courbe d'apprentissage et, deuxièmement, bien sûr, cela vous coûtera un peu plus de temps pour configurer une base de code en utilisant également une frappe stricte appropriée. D'après mon expérience, ces coûts en valent la peine pour toute base de code sérieuse que vous partagez avec d'autres. Une étude à grande échelle des langages de programmation et de la qualité du code dans Github suggère que "les langages typés statiquement, en général, sont moins sujets aux défauts que les types dynamiques, et qu'un typage fort vaut mieux qu'un typage faible à cet égard".

Il est intéressant de noter que ce même article trouve que TypeScript est moins sujet aux erreurs que JavaScript:

Pour ceux qui ont des coefficients positifs, on peut s'attendre à ce que le langage soit associé, ceteris paribus, à un plus grand nombre de corrections de défauts. Ces langages incluent C, C ++, JavaScript , Objective-C, Php et Python. Les langages Clojure, Haskell, Ruby, Scala et TypeScript ont tous des coefficients négatifs, ce qui implique que ces langages sont moins susceptibles que la moyenne d'entraîner des corrections de défauts commits.

Prise en charge IDE améliorée

L'expérience de développement avec TypeScript est une grande amélioration par rapport à JavaScript. L'IDE est informé en temps réel par le compilateur TypeScript sur ses informations de type riches. Cela donne quelques avantages majeurs. Par exemple, avec TypeScript, vous pouvez effectuer des refactorisations en toute sécurité comme des renommages sur l'ensemble de votre base de code. Grâce à l'achèvement du code, vous pouvez obtenir de l'aide en ligne sur les fonctions qu'une bibliothèque peut offrir. Plus besoin de les mémoriser ou de les rechercher dans les références en ligne. Les erreurs de compilation sont signalées directement dans l'EDI avec une ligne ondulée rouge pendant que vous êtes occupé à coder. Dans l'ensemble, cela permet un gain de productivité significatif par rapport à l'utilisation de JavaScript. On peut passer plus de temps à coder et moins de temps à déboguer.

Il existe une large gamme d'IDE qui ont une excellente prise en charge de TypeScript, comme Visual Studio Code, WebStorm, Atom et Sublime.

Contrôles nuls stricts

Les erreurs d'exécution du formulaire cannot read property 'x' of undefinedou undefined is not a functionsont très souvent causées par des bogues dans le code JavaScript. Par défaut, TypeScript réduit déjà la probabilité de ce type d'erreurs, car on ne peut pas utiliser une variable qui n'est pas connue du compilateur TypeScript (à l'exception des propriétés des anyvariables typées). Il est néanmoins possible d'utiliser par erreur une variable définie sur undefined. Cependant, avec la version 2.0 de TypeScript, vous pouvez éliminer ces types d'erreurs tous ensemble grâce à l'utilisation de types non nullables. Cela fonctionne comme suit:

Lorsque les vérifications nulles strictes sont activées ( --strictNullChecksindicateur du compilateur), le compilateur TypeScript ne permet pas undefinedd'être affecté à une variable à moins que vous ne déclariez explicitement qu'elle est de type nullable. Par exemple, let x : number = undefinedentraînera une erreur de compilation. Cela correspond parfaitement à la théorie des types car ce undefinedn'est pas un nombre. On peut définir xcomme un type de somme numberet undefinedpour corriger ceci: let x : number | undefined = undefined.

Une fois qu'un type est connu pour être nullable, ce qui signifie qu'il est d'un type qui peut également être de la valeur nullou undefined, le compilateur TypeScript peut déterminer par une analyse de type basée sur le flux de contrôle si votre code peut utiliser une variable en toute sécurité ou non. En d'autres termes, lorsque vous vérifiez qu'une variable passe undefinedpar exemple par une ifinstruction, le compilateur TypeScript déduira que le type dans cette branche du flux de contrôle de votre code n'est plus annulable et peut donc être utilisé en toute sécurité. Voici un exemple simple:

let x: number | undefined;
if (x !== undefined) x += 1; // this line will compile, because x is checked.
x += 1; // this line will fail compilation, because x might be undefined.

Lors de la construction, le co-concepteur de la conférence 2016 de TypeScript Anders Hejlsberg a donné une explication détaillée et une démonstration de cette fonctionnalité: vidéo (de 44:30 à 56:30).

Compilation

Pour utiliser TypeScript, vous avez besoin d'un processus de génération pour compiler en code JavaScript. Le processus de construction ne prend généralement que quelques secondes en fonction bien sûr de la taille de votre projet. Le compilateur TypeScript prend en charge la compilation incrémentielle ( --watchindicateur de compilateur) afin que toutes les modifications ultérieures puissent être compilées à une vitesse plus élevée.

Le compilateur TypeScript peut incorporer des informations de carte source dans les fichiers .js générés ou créer des fichiers .map distincts. Les informations de la carte source peuvent être utilisées par le débogage d'utilitaires comme Chrome DevTools et d'autres IDE pour relier les lignes du JavaScript à celles qui les ont générées dans le TypeScript. Cela vous permet de définir des points d'arrêt et d'inspecter les variables pendant l'exécution directement sur votre code TypeScript. Les informations de la carte source fonctionnent plutôt bien, elles existaient bien avant TypeScript, mais le débogage de TypeScript n'est généralement pas aussi efficace que lors de l'utilisation directe de JavaScript. Prenez le thismot - clé par exemple. En raison de la sémantique modifiée du thismot clé autour des fermetures depuis ES2015, il thispeut en fait exister pendant l'exécution sous la forme d'une variable appelée _this(voir cette réponse). Cela peut vous embrouiller pendant le débogage, mais n'est généralement pas un problème si vous le connaissez ou inspectez le code JavaScript. Il convient de noter que Babel souffre exactement du même type de problème.

Le compilateur TypeScript peut effectuer quelques autres astuces, comme générer du code d'interception basé sur des décorateurs , générer du code de chargement de module pour différents systèmes de modules et analyser JSX . Cependant, vous aurez probablement besoin d'un outil de construction en plus du compilateur Typescript. Par exemple, si vous souhaitez compresser votre code, vous devrez ajouter d'autres outils à votre processus de génération pour le faire.

Il existe des plugins de compilation TypeScript disponibles pour Webpack , Gulp , Grunt et à peu près tout autre outil de construction JavaScript. La documentation TypeScript contient une section sur l' intégration avec des outils de construction les couvrant tous. Un linter est également disponible au cas où vous souhaiteriez encore plus de vérification du temps de construction. Il existe également un grand nombre de projets d'amorçage qui vous permettront de démarrer avec TypeScript en combinaison avec un tas d'autres technologies comme Angular 2, React, Ember, SystemJS, Webpack, Gulp, etc.

Interopérabilité JavaScript

Étant donné que TypeScript est si étroitement lié à JavaScript, il possède de grandes capacités d'interopérabilité, mais un travail supplémentaire est nécessaire pour travailler avec les bibliothèques JavaScript dans TypeScript. Définitions tapuscrit sont nécessaires pour que le compilateur tapuscrit comprend que les appels de fonctions comme _.groupByou angular.copyou $.fadeOutne sont pas en fait des déclarations illégales. Les définitions de ces fonctions sont placées dans des .d.tsfichiers.

La forme la plus simple qu'une définition peut prendre est de permettre à un identifiant d'être utilisé de n'importe quelle manière. Par exemple, lorsque vous utilisez Lodash , un fichier de définition sur une seule ligne declare var _ : anyvous permettra d'appeler n'importe quelle fonction sur laquelle vous voulez _, mais bien sûr, vous pouvez toujours faire des erreurs: ce _.foobar()serait un appel TypeScript légal, mais c'est bien sûr , un appel illégal au moment de l'exécution. Si vous voulez une prise en charge de type appropriée et une complétion de code, votre fichier de définition doit être plus précis (voir les définitions de lodash pour un exemple).

Les modules Npm pré-packagés avec leurs propres définitions de type sont automatiquement compris par le compilateur TypeScript (voir documentation ). Pour à peu près n'importe quelle autre bibliothèque JavaScript semi-populaire qui n'inclut pas ses propres définitions, quelqu'un a déjà rendu les définitions de type disponibles via un autre module npm. Ces modules sont préfixés par "@ types /" et proviennent d'un référentiel Github appelé DefinitelyTyped .

Il y a une mise en garde: les définitions de type doivent correspondre à la version de la bibliothèque que vous utilisez au moment de l'exécution. Si ce n'est pas le cas, TypeScript peut vous interdire d'appeler une fonction ou de déréférencer une variable qui existe ou vous permet d'appeler une fonction ou de déréférencer une variable qui n'existe pas, tout simplement parce que les types ne correspondent pas à l'exécution au moment de la compilation . Assurez-vous donc de charger la bonne version des définitions de type pour la bonne version de la bibliothèque que vous utilisez.

Pour être honnête, cela pose un léger problème et cela peut être l'une des raisons pour lesquelles vous ne choisissez pas TypeScript, mais optez plutôt pour quelque chose comme Babel qui ne souffre pas du tout d'avoir à obtenir des définitions de type. D'un autre côté, si vous savez ce que vous faites, vous pouvez facilement surmonter tout type de problème causé par des fichiers de définition incorrects ou manquants.

Conversion de JavaScript en TypeScript

Tout .jsfichier peut être renommé en .tsfichier et exécuté via le compilateur TypeScript pour obtenir syntaxiquement le même code JavaScript en sortie (s'il était syntaxiquement correct en premier lieu). Même lorsque le compilateur TypeScript obtient des erreurs de compilation, il produira toujours un .jsfichier. Il peut même accepter des .jsfichiers en entrée avec le --allowJsdrapeau. Cela vous permet de commencer immédiatement avec TypeScript. Malheureusement, des erreurs de compilation sont susceptibles de se produire au début. Il ne faut pas oublier qu'il ne s'agit pas d'erreurs de démonstration comme vous pouvez en avoir l'habitude avec d'autres compilateurs.

Les erreurs de compilation que l'on obtient au début lors de la conversion d'un projet JavaScript en projet TypeScript sont inévitables de par la nature de TypeScript. TypeScript vérifie la validité de tout le code et doit donc connaître toutes les fonctions et variables utilisées. Ainsi, les définitions de type doivent être en place pour chacun d'eux, sinon des erreurs de compilation risquent de se produire. Comme mentionné dans le chapitre ci-dessus, pour à peu près n'importe quel framework JavaScript, il existe des .d.tsfichiers qui peuvent être facilement acquis avec l'installation de packages DefinitelyTyped. Il se peut cependant que vous ayez utilisé une bibliothèque obscure pour laquelle aucune définition TypeScript n'est disponible ou que vous ayez polyfilled certaines primitives JavaScript. Dans ce cas, vous devez fournir des définitions de type pour ces bits pour que les erreurs de compilation disparaissent. Créez simplement un .d.tsfichier et incluez-le dans le tableau de tsconfig.json files, afin qu'il soit toujours pris en compte par le compilateur TypeScript. Dans ce document, déclarez ces bits que TypeScript ne connaît pas comme type any. Une fois que vous avez éliminé toutes les erreurs, vous pouvez progressivement introduire la saisie dans ces parties en fonction de vos besoins.

Un certain travail sur la (re) configuration de votre pipeline de build sera également nécessaire pour intégrer TypeScript dans le pipeline de build. Comme mentionné dans le chapitre sur la compilation, il existe de nombreuses bonnes ressources et je vous encourage à rechercher des projets de démarrage qui utilisent la combinaison d'outils avec laquelle vous souhaitez travailler.

Le plus grand obstacle est la courbe d'apprentissage. Je vous encourage à jouer avec un petit projet au début. Regardez comment cela fonctionne, comment il construit, quels fichiers il utilise, comment il est configuré, comment il fonctionne dans votre IDE, comment il est structuré, quels outils il utilise, etc. La conversion d'une grande base de code JavaScript en TypeScript est faisable quand vous savez que fais tu. Lisez ce blog par exemple sur la conversion de 600k lignes en texte dactylographié en 72 heures ). Assurez-vous simplement d'avoir une bonne compréhension de la langue avant de faire le saut.

Adoption

TypeScript est open-source (licence Apache 2, voir GitHub ) et soutenu par Microsoft. Anders Hejlsberg , l'architecte principal de C # est le fer de lance du projet. C'est un projet très actif; l'équipe TypeScript a publié de nombreuses nouvelles fonctionnalités au cours des dernières années et de nombreuses autres sont encore prévues (voir la feuille de route ).

Quelques faits sur l'adoption et la popularité:

• Dans le sondage des développeurs StackOverflow 2017, TypeScript était le transpilateur JavaScript le plus populaire (9e place au total) et a remporté la troisième place dans la catégorie des langages de programmation les plus appréciés.
• Dans l' enquête sur l'état de js en 2018, TypeScript a été déclaré comme l'un des deux grands gagnants dans la catégorie des saveurs JavaScript (ES6 étant l'autre).
• Dans l' enquête StackOverlow deverloper de 2019, TypeScript s'est hissé à la 9e place des langages les plus populaires parmi les développeurs professionnels, dépassant à la fois le C et le C ++. Il a de nouveau pris la troisième place parmi les langues les plus appréciées.

TypeScript fait quelque chose de similaire à ce que less ou sass fait pour CSS. Ce sont des super ensembles, ce qui signifie que chaque code JS que vous écrivez est un code TypeScript valide. De plus, vous pouvez utiliser les autres goodies qu'il ajoute à la langue, et le code transpilé sera js valide. Vous pouvez même définir la version JS sur laquelle vous souhaitez que votre code résultant se trouve.

Actuellement, TypeScript est un super ensemble de ES2015, donc pourrait être un bon choix pour commencer à apprendre les nouvelles fonctionnalités js et à les transposer dans la norme requise pour votre projet.

" TypeScript Fundamentals " - un cours vidéo Pluralsight par Dan Wahlin et John Papa est une très bonne mise à jour (25 mars 2016) pour refléter TypeScript 1.8, une introduction à Typescript.

Pour moi, les très bonnes fonctionnalités, à côté des belles possibilités pour intellisense, sont les classes , les interfaces , les modules , la facilité d'implémentation d'AMD et la possibilité d'utiliser le débogueur Visual Studio Typescript lorsqu'il est appelé avec IE.

Pour résumer : s'il est utilisé comme prévu, Typescript peut rendre la programmation JavaScript plus fiable et plus facile. Il peut augmenter considérablement la productivité du programmeur JavaScript par rapport au SDLC complet.

Script Ecma 5 (ES5) que tous les navigateurs prennent en charge et précompilé. ES6 / ES2015 et ES / 2016 sont venus cette année avec beaucoup de changements, donc pour faire apparaître ces changements, il y a quelque chose entre les deux qui devrait prendre soin de TypeScript.

• TypeScript est Types -> signifie que nous devons définir le type de données de chaque propriété et méthode. Si vous connaissez C #, alors Typescript est facile à comprendre.

• Le gros avantage de TypeScript est que nous identifions les problèmes liés au type avant de passer en production. Cela permet aux tests unitaires d'échouer en cas de non-concordance de type.