Qu'est-ce que TypeScript? JavaScript fortement typé

Qu'est-ce que TypeScript? TypeScript défini

TypeScript est une variante du langage de programmation JavaScript populaire qui ajoute certaines fonctionnalités clés importantes pour le développement en entreprise. En particulier, TypeScript est fortement typé - c'est-à-dire que les variables et autres structures de données peuvent être déclarées comme étant d'un type spécifique, comme une chaîne ou un booléen, par le programmeur, et TypeScript vérifiera la validité de leurs valeurs. Ce n'est pas possible en JavaScript, qui est mal saisi .

Le typage fort de TypeScript rend possible un certain nombre de fonctionnalités qui aident à rendre les développeurs plus efficaces, en particulier lorsqu'ils traitent de bases de code à grande échelle à l'échelle de l'entreprise. TypeScript est compilé, plutôt qu'interprété comme JavaScript, ce qui signifie que des erreurs peuvent être détectées avant l'exécution; Les IDE qui effectuent une compilation incrémentielle en arrière-plan peuvent repérer de telles erreurs pendant le processus de codage.

Malgré cette différence clé avec JavaScript, TypeScript peut toujours être exécuté partout où JavaScript peut s'exécuter. En effet, TypeScript ne se compile pas en exécutable binaire, mais en JavaScript standard. Plongeons-nous pour en savoir plus.

TypeScript contre JavaScript 

TypeScript est un sur - ensemble de JavaScript. Bien que tout code JavaScript correct soit également un code TypeScript correct, TypeScript possède également des fonctionnalités de langage qui ne font pas partie de JavaScript. La caractéristique la plus importante propre à TypeScript - celle qui a donné son nom à TypeScript - est, comme indiqué, un typage fort: une variable TypeScript est associée à un type, comme une chaîne, un nombre ou un booléen, qui indique au compilateur quel type de données ça peut tenir. De plus, TypeScript prend en charge l'inférence de type et inclut un type fourre-tout, ce qui signifie que les variables n'ont pas à avoir leurs types affectés explicitement par le programmeur; Plus sur cela dans un instant. 

TypeScript est également conçu pour la programmation orientée objet - JavaScript, pas tellement. Les concepts tels que l'héritage et le contrôle d'accès qui ne sont pas intuitifs en JavaScript sont simples à implémenter dans TypeScript. De plus, TypeScript vous permet d'implémenter des interfaces, un concept largement dénué de sens dans le monde JavaScript.

Cela dit, il n'y a pas de fonctionnalité que vous pouvez coder en TypeScript que vous ne pouvez pas également coder en JavaScript. C'est parce que TypeScript n'est pas compilé dans un sens conventionnel - comme, par exemple, C ++ est compilé en un exécutable binaire qui peut s'exécuter sur un matériel spécifié. Au lieu de cela, le compilateur TypeScript transcode le code TypeScript en JavaScript fonctionnellement équivalent. Cet article de Sean Maxwell sur GitConnected contient d'excellents exemples d'extraits de code TypeScript orientés objet et de leurs équivalents JavaScript. Le JavaScript résultant peut ensuite être exécuté partout où n'importe quel code JavaScript peut s'exécuter, d'un navigateur Web à un serveur équipé de Node.js.

Donc, si TypeScript est, en fin de compte, juste un moyen sophistiqué de générer du code JavaScript, pourquoi s'en préoccuper? Pour répondre à cette question, nous devons examiner d'où vient TypeScript et à quoi il sert.

À quoi sert TypeScript?

TypeScript a été publié en open source en 2012 après avoir été développé au sein de Microsoft. (Le géant du logiciel reste le responsable du projet et le développeur principal.) Cet article de ZDNet de l'époque offre un regard intrigant sur les raisons de cette situation: «Il s'avère que l'une des grandes motivations était l'expérience d'autres équipes de Microsoft qui tentaient de développer et maintenez les produits Microsoft en JavaScript. »

À l'époque, Microsoft essayait de faire évoluer Bing Maps en tant que concurrent de Google Maps, ainsi que de proposer des versions Web de sa suite Office - et JavaScript était le principal langage de développement pour ces tâches. Mais les développeurs, en substance, ont eu du mal à écrire des applications à l'échelle des offres phares de Microsoft en utilisant JavaScript. Ils ont donc développé TypeScript pour faciliter la création d'applications de niveau entreprise à exécuter dans des environnements JavaScript. C'est l'esprit derrière le slogan du langage sur le site officiel du projet TypeScript: «JavaScript qui évolue».

Pourquoi TypeScript est-il meilleur pour ce type de travail que JavaScript vanille? Eh bien, nous pouvons discuter pour toujours des mérites de la programmation orientée objet, mais la réalité est que de nombreux développeurs de logiciels qui travaillent sur des projets de grande entreprise y sont habitués, et cela aide à la réutilisation du code en tant que projets gonflés. Vous ne devez pas non plus négliger la mesure dans laquelle les outils peuvent stimuler la productivité des développeurs. Comme indiqué, la plupart des IDE d'entreprise prennent en charge la compilation incrémentielle en arrière-plan, qui peut détecter les erreurs pendant que vous travaillez. (Tant que votre code est syntaxiquement correct, il sera toujours transpilé, mais le JavaScript résultant peut ne pas fonctionner correctement; considérez la vérification des erreurs comme l'équivalent de la vérification orthographique.) Ces IDE peuvent également vous aider à refactoriser le code à mesure que vous approfondissez votre projet.

En bref, TypeScript est utilisé lorsque vous voulez les fonctionnalités et les outils d'entreprise d'un langage comme Java, mais que vous avez besoin de votre code pour s'exécuter dans un environnement JavaScript. En théorie, vous pourriez écrire le code JavaScript standard que le compilateur TypeScript génère vous-même, mais cela vous prendrait beaucoup plus de temps et la base de code serait plus difficile pour une grande équipe à comprendre et à déboguer collectivement.

Oh, et TypeScript a une autre astuce dans sa manche: vous pouvez configurer le compilateur pour qu'il cible un environnement d'exécution JavaScript spécifique, un navigateur ou même une version linguistique. Étant donné que tout code JavaScript bien formé est également du code TypeScript, vous pouvez, par exemple, prendre du code écrit selon la spécification ECMAScript 2015, qui comprenait un certain nombre de nouvelles fonctionnalités syntaxiques, et le compiler dans un code JavaScript qui serait compatible avec les versions héritées de la langue.

Installez TypeScript

Prêt à commencer à jouer avec TypeScript? L'installation de la langue est facile. Si vous utilisez déjà Node.js sur votre machine de développement, vous pouvez utiliser NPM, le gestionnaire de packages Node.js, pour l'installer. Le didacticiel officiel de TypeScript en 5 minutes vous guidera tout au long du processus.

TypeScript peut également être installé en tant que plug-in dans votre IDE de choix, ce qui vous donnera les avantages d'outillage dont nous avons parlé ci-dessus et s'occupera également du processus de compilation de TypeScript en JavaScript. Étant donné que TypeScript a été développé par Microsoft, il n'est pas surprenant qu'il existe des plug-ins de haute qualité disponibles pour Visual Studio et Visual Studio Code. Mais en tant que projet open source, TypeScript a été adapté partout, allant des IDE open source comme Eclipse aux éditeurs de texte vénérables comme Vim. Et l'ensemble du projet peut être parcouru et téléchargé depuis GitHub.

Syntaxe TypeScript

Une fois TypeScript installé, vous êtes prêt à commencer à explorer, et cela signifie comprendre les bases de la syntaxe TypeScript. Étant donné que JavaScript est la base de TypeScript, vous devez vous familiariser avec JavaScript avant de commencer. Nul doute que vos principaux points d'intérêt seront les fonctionnalités spécifiques à TypeScript qui rendent le langage unique; nous aborderons les points forts ici.

Types TypeScript

De toute évidence, la caractéristique syntaxique la plus importante de TypeScript est le système de types. Le langage prend en charge un certain nombre de types de base:

  • Boolean: une simple valeur vrai / faux.
  • Nombre: dans TypeScript, comme dans JavaScript, tous les nombres sont des valeurs à virgule flottante - il n'y a pas d'entier séparé. TypeScript prend en charge les littéraux décimaux, hexadécimaux, binaires et octaux.
  • Chaîne: une chaîne de données textuelles. Vous pouvez utiliser des guillemets simples ou doubles pour entourer votre chaîne lors de la définition des données. Vous pouvez également utiliser des accents inversés ( `) pour entourer des chaînes de plusieurs lignes, et vous pouvez incorporer des expressions dans une chaîne avec la syntaxe ${ expr }.
  • Tableaux et tuples: ces types vous permettent de stocker plusieurs valeurs dans une séquence spécifiée. Dans un tableau, les valeurs individuelles sont toutes du même type de données, alors que dans un tuple, elles peuvent être hétérogènes. La forEach()méthode TypeScript est utilisée pour appeler une fonction sur chaque élément d'un tableau.
  • Enum: comme le type du même nom en C #, une énumération TypeScript vous permet d'affecter des noms lisibles par l'homme à une séquence de valeurs numériques.
  • Any: Il s'agit d'un type pour une variable où vous ne savez pas nécessairement à l'avance quelle valeur elle aboutira - il peut prendre ses valeurs à partir d'une entrée utilisateur ou d'une bibliothèque tierce, par exemple.
  • Object: c'est le type qui représente tout ce qui n'est pas un type primitif; il est essentiel à la nature orientée objet de TypeScript.

Il existe deux manières différentes d'attribuer explicitement un type à une variable. Le premier est la syntaxe des crochets angulaires:

laissez someValue: any;

laissez strLength: number = (someValue) .length;

Et le second est la assyntaxe:

let someValue: any = "ceci est une chaîne";

let strLength: number = (someValue as string) .length;

Ces extraits de code, extraits de la documentation TypeScript, sont fonctionnellement équivalents. Les deux se définissent someValuecomme une variable de type anyet affectent "this is a string"comme valeur, puis définissent strLengthcomme un nombre et attribuent comme valeur la longueur du contenu de someValue.

Les types TypeScript peuvent également être définis par inférence. Autrement dit, si vous définissez une valeur de x sur 7 sans établir le type de x, le compilateur supposera que x doit être un nombre. Dans certaines circonstances, le compilateur peut déduire un anytype, bien que vous puissiez utiliser des indicateurs de compilation pour vous assurer que ce n'est pas le cas.

Le système de types TypeScript est assez riche et dépasse le cadre de cet article. Il existe un certain nombre de types avancés et utilitaires; ceux-ci incluent les types d'union, qui vous permettent d'établir qu'une variable sera l'un des nombreux types spécifiés, et les types mappés, qui sont des types que vous pouvez créer en fonction d'un type existant, dans lesquels vous transformez chaque propriété du type existant dans le même façon. Par exemple, vous pouvez créer un type d'union pour une variable que vous voulez être un nombre ou un booléen, mais pas une chaîne ou autre chose; ou vous pouvez créer un type mappé qui définit tous les éléments d'un tableau en lecture seule.

Interface TypeScript

Comme la plupart des langages orientés objet, TypeScript possède des interfaces qui permettent aux utilisateurs de définir leurs propres types. Les interfaces établissent les propriétés d'un objet, ainsi que les types associés à ces propriétés. Les interfaces TypeScript peuvent avoir des propriétés facultatives. Pour plus d'informations sur la syntaxe, consultez la documentation TypeScript.  

Génériques TypeScript

TypeScript partage également le concept des génériques avec des langages orientés objet comme Java et C #. (La fonction équivalente en C ++ s'appelle un modèle.) Dans TypeScript, les composants génériques peuvent fonctionner sur une variété de types, plutôt que sur un seul, selon l'endroit où ces composants sont appelés dans le code. Voici un exemple très simple de la documentation TypeScript. Tout d'abord, considérons cette fonction, qui prend un argument puis le renvoie immédiatement:

identité de fonction (arg: any): any {

    return arg;

}

Comme la fonction est définie avec le anytype, elle acceptera un argument du type que vous choisirez de lui lancer. Cependant, ce qu'il renvoie sera du anytype. Voici une version de la fonction utilisant des génériques:

identité de fonction (arg: T): T {

    return arg;

}

Ce code inclut la variable typeT , qui capture le type de l'argument entrant et le stocke pour notre utilisation ultérieure.

Il y a beaucoup plus dans les génériques, qui sont essentiels pour rendre la réutilisation du code possible dans les projets de grande entreprise. Consultez la documentation TypeScript pour plus de détails.

Classe TypeScript 

Dans la programmation orientée objet, les classes héritent des fonctionnalités et servent à leur tour de blocs de construction d'objets. JavaScript n'utilisait traditionnellement pas de classes, reposant plutôt sur des fonctions et l'héritage basé sur des prototypes, mais le concept a été ajouté au langage dans le cadre de la version ECMAScript 2015 de la norme. Les classes faisaient déjà partie de TypeScript, et maintenant TypeScript utilise la même syntaxe que JavaScript. L'un des avantages du compilateur de TypeScript est qu'il peut transformer le code avec des classes JavaScript en code JavaScript hérité conforme aux normes antérieures à 2015.

Date TypeScript

Il existe un certain nombre de méthodes et d'objets disponibles pour obtenir et définir la date et l'heure dans TypeScript, principalement hérités de JavaScript. JavaTPoint a un bon aperçu de la façon dont cela fonctionne.

Tutoriel TypeScript 

Prêt à aller plus loin? Mettez-vous à jour avec ces didacticiels TypeScript:

  • TypeScript en 5 minutes vous guidera tout au long du processus d'installation de TypeScript si vous ne l'avez pas déjà fait.
  • Ce didacticiel Visual Studio Code montre comment les IDE contribuent réellement à votre productivité de développement TypeScript.
  • Tutoriel TypeScript pour les débutants: le guide manquant est une introduction très complète qui sera utile même si vous avez une expérience JavaScript assez limitée.

Si vous cherchez à apprendre à utiliser TypeScript avec React, la bibliothèque JavaScript pour créer des interfaces utilisateur développées par Facebook, consultez Comment utiliser TypeScript avec React et Redux de Ross Bulat et la section sur React et webpack dans la documentation TypeScript. Bon apprentissage!