Question Qu'est-ce que TypeScript et pourquoi l'utiliserais-je à la place de JavaScript? [fermé]


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 des raisons de le considérer?


1269
2017-10-02 16:37


origine


Réponses:


J'ai d'abord écrit cette réponse quand Typescript était encore   hot-off-les-presses. Cinq ans plus tard, c'est un aperçu OK, mais regardez   à La réponse de Lodewijk ci-dessous pour plus de profondeur

1000ft voir ...

Manuscrit est un sur-ensemble de JavaScript qui fournit principalement la saisie, les classes et les interfaces statiques optionnelles. 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 pourrait aboutir à un logiciel plus robuste, tout en étant déployable là où une application JavaScript normale serait exécutée.

C'est open source, mais vous n'obtenez l'Intellisense intelligent que lorsque vous tapez si vous utilisez un IDE supporté. Initialement, ce n'était que Microsoft Visual Studio (également noté dans le blog de Miguel de Icaza). Ces jours-ci, d'autres IDE offrent aussi le support de TypeScript.

Y a-t-il d'autres technologies similaires?

Il y a CoffeeScript, mais cela sert vraiment un but différent. IMHO, CoffeeScript fournit une lisibilité pour les humains, mais TypeScript fournit également une lisibilité profonde pour outils grâce à son typage statique en option (voir blog récent pour un peu plus de critique). Il y a aussi Dard mais c'est un remplacement complet pour JavaScript (bien qu'il peut produire du code JavaScript)

Exemple

A titre d'exemple, voici un peu de TypeScript (vous pouvez jouer avec ceci dans le Terrain de jeu TypeScript)

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;
})();

Notez comment le TypeScript définit le type de variables membres et les 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 le passage d'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 le greet() La méthode renvoie une chaîne.

Débogage du script

De nombreux navigateurs et IDE offrent une prise en charge directe du débogage à l'aide de sourcemaps. Voir cette question sur le dépassement de pile pour plus de détails: Débogage du code TypeScript avec Visual Studio

Veulent en savoir plus?

J'ai d'abord écrit cette réponse quand Typescript était encore à chaud. Check-out La réponse de Lodewijk à cette question pour quelques détails plus actuels.


1022
2017-10-02 16:41



Bien que la réponse acceptée soit correcte, j'ai senti que cela ne faisait pas vraiment justice à TypeScript à ce stade. Ce n'est plus les premiers jours. TypeScript trouve maintenant beaucoup plus d'adoption avec plusieurs frameworks populaires écrits en TypeScript. Les raisons pour lesquelles vous devriez choisir TypeScript au lieu de JavaScript sont nombreuses maintenant.

Relation avec JavaScript

JavaScript est standardisé par les standards ECMAScript. Tous les navigateurs en cours d'utilisation ne prennent pas en charge toutes les fonctionnalités des nouvelles normes ECMAScript (voir table). TypeScript prend en charge les nouvelles normes ECMAScript et les compile aux (anciennes) cibles ECMAScript de votre choix (les cibles actuelles sont 3, 5 et 6 [a.k.a. 2015]). Cela signifie que vous pouvez utiliser les fonctionnalités de ES2015 et au-delà, comme les modules, les fonctions lambda, les classes, l'opérateur de propagation, la déstructuration, aujourd'hui. Il ajoute bien sûr le support de type, qui ne fait partie d'aucune norme ECMAScript et ne peut probablement jamais être dû à la nature interprétée au lieu de la nature compilée de JavaScript. Le système de type de TypeScript est relativement riche et inclut: interfaces, énumérations, types hybrides, génériques, types d'union et d'intersection, modificateurs d'accès et bien plus encore. le site officiel de TypeScript donne un aperçu de ces fonctionnalités.

Relation avec d'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 votre .js fichiers à .ts fichiers et commence à utiliser TypeScript (voir "interopérabilité JavaScript" ci-dessous). Les fichiers TypeScript sont compilés en JavaScript lisibles, de sorte que la migration est possible et la compréhension du 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 avez des outils de preuve d'avenir qui prennent les standards ECMAScript modernes et les compilons vers des versions plus anciennes de JavaScript avec Babel étant le plus populaire. D'un autre côté, vous avez des langages qui peuvent différer totalement de JavaScript et qui ciblent JavaScript, comme Coffeescript, Clojure, Dart, Elm, Haxe, ScalaJs, et un hôte entier de plus (voir liste). Ces langues, bien qu'elles puissent être meilleures que celles où l'avenir de JavaScript pourrait mener, courent un plus grand risque de ne pas trouver assez d'adoption pour que leur avenir soit garanti. Vous pourriez également avoir plus de difficulté à trouver des développeurs expérimentés pour certaines de ces langues, bien que celles que vous trouverez puissent souvent être plus enthousiastes. L'interopérabilité avec JavaScript peut également être un peu plus complexe, car ils sont plus éloignés de ce que JavaScript est réellement.

TypeScript se situe entre ces deux extrêmes, équilibrant ainsi le risque. TypeScript n'est pas un choix risqué par aucune norme. Il vous faut très peu d'efforts pour vous familiariser avec JavaScript, car ce n'est pas un langage complètement différent, il dispose d'un excellent support d'interopérabilité JavaScript et il a été beaucoup adopté récemment.

Typiquement saisie statique et inférence de type

JavaScript est dynamiquement typé. Cela signifie que JavaScript ne sait pas de quel type est une variable tant qu'elle n'est pas réellement instanciée au moment de l'exécution. Cela signifie également qu'il peut être trop tard. TypeScript ajoute le support de type à JavaScript. Les bogues causés par de fausses suppositions d'une variable d'un certain type peuvent être complètement éradiqués si vous jouez bien vos cartes (à quel point vous tapez strictement votre code ou si vous tapez votre code du tout).

TypeScript rend la saisie 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, autrement, entraînerait une erreur d'exécution.

TypeScript est facultativement typé par défaut. Par exemple function divideByTwo(x) { return x / 2 } est une fonction valide dans TypeScript qui peut être appelée avec tout type de paramètre, même si l'appeler avec une chaîne entraînera évidemment un runtime Erreur. Tout comme vous êtes habitué à JavaScript. Cela fonctionne, car quand aucun type n'a été assigné explicitement et que le type n'a pas pu être déduit, comme dans l'exemple divideByTwo, TypeScript assignera implicitement le type any. Cela signifie que la signature de type de la fonction divideByTwo devient automatiquement function divideByTwo(x : any) : any. Il existe un indicateur de compilateur pour interdire ce comportement: --noImplicitAny. Activer ce drapeau vous donne un plus grand degré de sécurité, mais cela signifie également que vous devrez faire plus de dactylographie.

Les types ont un coût associé à eux. Tout d'abord, il y a une courbe d'apprentissage, et en second lieu, bien sûr, il vous en coûtera un peu plus de temps pour mettre en place une base de code en utilisant la saisie stricte correcte. Dans mon expérience, ces coûts en valent vraiment la peine sur 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 "que les langages typés statiquement en général sont moins sujets aux défauts que les types dynamiques, et que le typage fort vaut mieux que le typage faible dans le même sens".

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

Pour ceux avec des coefficients positifs, nous pouvons nous attendre à ce que la langue   est associé, ceteris paribus, à un plus grand nombre de corrections de défauts.   Ces langues comprennent C, C ++, JavaScript, Objective-C, Php et   Python. Les langues Clojure, Haskell, Ruby, Scala et Manuscrit,   tous ont des coefficients négatifs impliquant que ces langues sont moins   probable que la moyenne entraînera des défauts de fixation des commits.

Support IDE amélioré

L'expérience de développement avec TypeScript est une grande amélioration par rapport à JavaScript. L'EDI est informé en temps réel par le compilateur TypeScript sur ses informations de type riche. Cela donne quelques avantages majeurs. Par exemple, avec TypeScript, vous pouvez effectuer en toute sécurité des refactorings tels que des renames sur l'intégralité de votre base de code. Grâce à l'achèvement du code, vous pouvez obtenir une aide en ligne sur toutes les fonctions qu'une bibliothèque peut offrir. Plus besoin de se souvenir d'eux ou de les consulter 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 y a un large éventail d'EDI qui ont un excellent support pour TypeScript, comme Visual Studio et VS code, Atom, Sublime et IntelliJ / WebStorm.

Contrôles nuls stricts

Erreurs d'exécution du formulaire cannot read property 'x' of undefined ou undefined is not a function sont très souvent causés par des bogues dans le code JavaScript. Dès le début TypeScript réduit déjà la probabilité de ces types d'erreurs, car on ne peut pas utiliser une variable qui n'est pas connue du compilateur TypeScript (à l'exception des propriétés de any variables typées). Il est encore possible d'utiliser par erreur une variable définie sur undefined. Cependant, avec la version 2.0 de TypeScript, vous pouvez éliminer tous ces types d'erreurs en utilisant des types non-nullables. Cela fonctionne comme suit:

Avec des vérifications nulles strictes activées (--strictNullChecks compilateur) le compilateur TypeScript ne permettra pas undefined être affecté à une variable sauf si vous le déclarez explicitement comme ayant un type Nullable. Par exemple, let x : number = undefined résultera en une erreur de compilation. Cela correspond parfaitement à la théorie des types, puisque undefined ce n'est pas un nombre. On peut définir x être un type de somme number et undefined pour corriger cela: let x : number | undefined = undefined.

Une fois qu'un type est connu pour être nul, ce qui signifie qu'il est d'un type qui peut aussi être de la valeur null ou undefined, le compilateur de TypeScript peut déterminer par l'analyse de type basée sur le flux de contrôle si votre code peut ou non utiliser une variable en toute sécurité. En d'autres termes, lorsque vous vérifiez une variable est undefined à travers par exemple un if déclaration le compilateur TypeScript déduira que le type dans cette branche du flux de contrôle de votre code n'est plus valide 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 conférence de construction 2016, Co-concepteur de TypeScript Anders Hejlsberg a donné une explication détaillée et une démonstration de cette fonctionnalité: vidéo (de 44h30 à 56h30)

Compilation

Pour utiliser TypeScript, vous avez besoin d'un processus de compilation à 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 supporte la compilation incrémentale (--watch compilateur), de sorte que toutes les modifications ultérieures puissent être compilées plus rapidement.

Le compilateur TypeScript peut intégrer des informations de carte source dans les fichiers .js générés ou créer des fichiers .map distincts. Les informations de carte source peuvent être utilisées par les utilitaires de débogage tels que 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 très bien, il était déjà longtemps avant le TypeScript, mais le débogage de TypeScript n'est généralement pas aussi efficace qu'avec JavaScript. Prendre la this mot-clé par exemple. En raison de la sémantique changée du this mot-clé autour des fermetures depuis ES2015, this peut effectivement exister pendant l'exécution en tant que variable appelée _this(voir cette réponse). Cela peut vous perturber pendant le débogage, mais n'est généralement pas un problème si vous le savez ou inspectez le code JavaScript. Il convient de noter que Babel souffre exactement le même genre de problème.

Il y a quelques autres astuces que le compilateur TypeScript peut faire, comme générer un code d'interception basé sur décorateurs, générant le code de chargement du module pour différents systèmes de modules et l'analyse syntaxique JSX. Cependant, vous aurez probablement besoin d'un outil de construction en plus du compilateur Typescript. Par exemple, si vous voulez compresser votre code, vous devrez ajouter d'autres outils à votre processus de construction pour le faire.

Des plugins de compilation TypeScript sont disponibles pour Webpack, Gorgée, Grognement et à peu près tout autre outil de construction JavaScript là-bas. La documentation TypeScript comporte une section sur intégrer avec des outils de construction les couvrant tous. UNE linter est également disponible au cas où vous voudriez encore plus de temps de construction. Il y a aussi un grand nombre de projets de démarrage 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 TypeScript sont nécessaires pour que le compilateur TypeScript comprenne que les appels de fonction comme _.groupBy ou angular.copy ou $.fadeOut ne sont pas en fait des déclarations illégales. Les définitions de ces fonctions sont placées dans .d.ts des dossiers.

La forme la plus simple qu'une définition peut prendre est de permettre l'utilisation d'un identifiant de quelque manière que ce soit. Par exemple, en utilisant Lodash, un fichier de définition de ligne unique declare var _ : any vous permettra d'appeler toute fonction que vous voulez sur _, mais bien sûr, vous êtes toujours capable de faire des erreurs: _.foobar() serait un appel TypeScript légal, mais est bien sûr un appel illégal à l'exécution. Si vous voulez un support de type et un code adéquats, votre fichier de définition doit être plus précis (voir définitions de lodash à titre d'exemple).

Modules NPM qui viennent pré-emballés avec leurs propres définitions de type sont automatiquement compris par le compilateur TypeScript (voir Documentation). Pour presque toutes les autres librairies JavaScript semi-populaires qui n'incluent pas leurs propres définitions, quelqu'un a déjà rendu les définitions de types disponibles via un autre module npm. Ces modules sont préfixés avec "@ 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 déréférencer une variable existante ou vous permettre d'appeler une fonction ou déréférencer une variable qui n'existe pas, simplement parce que les types ne correspondent pas à l'exécution à 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, il y a un petit problème à cela et c'est 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 des définitions de type. D'autre part, si vous savez ce que vous faites, vous pouvez facilement surmonter tout type de problèmes causés par des fichiers de définition incorrects ou manquants.

Conversion de JavaScript en TypeScript

Tout .js le fichier peut être renommé en .ts et a couru à travers le compilateur TypeScript pour obtenir syntaxiquement le même code JavaScript en tant que sortie (si elle était syntaxiquement correcte en premier lieu). Même lorsque le compilateur TypeScript obtient des erreurs de compilation, il produira toujours un .js fichier. Il peut même accepter .js fichiers en entrée avec le --allowJs drapeau. Cela vous permet de commencer avec TypeScript tout de suite. Malheureusement, les erreurs de compilation risquent de se produire au début. Il est important de se rappeler que ce ne sont pas des erreurs d'affichage comme vous pouvez l'être 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 selon la nature de TypeScript. Vérifications de typeScript tout code pour la validité et donc il doit connaître toutes les fonctions et variables qui sont utilisées. Ainsi, les définitions de type doivent être en place pour tous, sinon des erreurs de compilation sont inévitables. Comme mentionné dans le chapitre ci-dessus, pour pratiquement tous les framework JavaScript il y a .d.ts fichiers qui peuvent facilement être acquis avec l'installation de Forfaits 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 rempli certaines primitives JavaScript. Dans ce cas, vous devez fournir des définitions de type pour ces bits afin que les erreurs de compilation disparaissent. Il suffit de créer un .d.ts fichier et l'inclure dans le tsconfig.json files tableau, de sorte qu'il est toujours considéré par le compilateur TypeScript. En déclarant 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 de ces parties en fonction de vos besoins.

Certains travaux sur la (re) configuration de votre pipeline de build seront également nécessaires pour que TypeScript soit inclus dans le pipeline de génération. Comme mentionné dans le chapitre sur la compilation, il y a beaucoup de bonnes ressources là-bas et je vous encourage à rechercher des projets de semences qui utilisent la combinaison d'outils avec lesquels vous voulez travailler.

Le plus gros 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. Convertir une grande base de code JavaScript en TypeScript est très faisable quand vous sachez ce que vous faites, mais cela pourrait être frustrant quand vous ne le faites pas.

Adoption

TypeScript est open source (sous 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 de TypeScript a publié beaucoup de nouvelles fonctionnalités au cours des dernières années et beaucoup d'autres sont encore à venir (voir le feuille de route).

dans le Sondage auprès des développeurs de StackOverflow 2017 TypeScript a été le transpileur JavaScript le plus populaire (9e place au classement général) et a remporté la troisième place dans la catégorie des langages de programmation les plus appréciés.


725
2018-01-27 21:23



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 valable js. Vous pouvez même définir la version JS pour laquelle vous voulez que votre code soit activé.

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


54
2018-02-11 20:32



"Principes de base de TypeScript"- un cours vidéo Pluralsight de Dan Wahlin et John Papa est un très bon, actuellement (25 mars 2016) mis à jour pour refléter TypeScript 1.8, introduction à Typescript.

Pour moi, les très bonnes fonctionnalités, outre les belles possibilités pour intellisense, sont les Des classes, interfaces, 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.

Résumer: S'il est utilisé comme prévu, Typescript peut rendre la programmation JavaScript plus fiable et plus simple. Il peut augmenter considérablement la productivité du programmeur JavaScript sur le SDLC complet.


30
2017-12-27 04:18



Ecma script 5 (ES5) que tous les navigateurs supportent et précompilent. 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éthodes. Si vous connaissez C #, alors Typescript est facile à comprendre. • Le gros avantage de TypeScript est que nous identifions les problèmes liés à l'identité avant de passer en production. Cela permet aux tests unitaires d'échouer s'il y a une discordance de type.


7
2018-06-06 12:14