TypeScript for Beginners, Part 1 Mise en route

Commençons ce didacticiel par la question: "Qu'est-ce que TypeScript?" 

TypeScript est un sur-ensemble typé de JavaScript qui se compile en JavaScript pur. Par analogie, si JavaScript était CSS, alors TypeScript serait SCSS.. 

Tout le code JavaScript valide que vous écrivez est également un code TypeScript valide. Cependant, avec TypeScript, vous utilisez le typage statique et les dernières fonctionnalités compilées en JavaScript, qui est pris en charge par tous les navigateurs. TypeScript a pour but de résoudre le problème de la mise à l'échelle de JavaScript, et fait un très bon travail.. 

Dans ce didacticiel, vous allez commencer par vous familiariser avec les différentes fonctionnalités de TypeScript et vous expliquer pourquoi il est judicieux de l’apprendre. Le reste des sections de l'article couvrira l'installation et la compilation de TypeScript, ainsi que des éditeurs de texte courants qui vous offrent une prise en charge de la syntaxe TypeScript et d'autres fonctionnalités importantes..

Pourquoi apprendre TypeScript?

Si vous n'avez jamais utilisé TypeScript auparavant, vous vous demandez peut-être pourquoi vous devriez vous soucier de ne pas l'apprendre du tout quand il compile en JavaScript à la fin.. 

Laissez-moi vous assurer que vous n'aurez pas à passer beaucoup de temps à apprendre TypeScript. TypeScript et JavaScript ont une syntaxe très similaire, et vous pouvez simplement renommer votre .js fichiers à .ts et commencez à écrire du code TypeScript. Voici quelques fonctionnalités qui devraient vous convaincre de commencer à apprendre TypeScript:

1. Contrairement à JavaScript, qui est typé dynamiquement, TypeScript vous permet d'utiliser le typage statique. Cette fonctionnalité en elle-même facilite la maintenance du code et réduit considérablement les risques de bogues pouvant être causés par des hypothèses incorrectes sur le type de certaines variables. En prime, TypeScript peut déterminer le type d'une variable en fonction de son utilisation sans que vous spécifiiez explicitement un type. Cependant, vous devez toujours spécifier explicitement les types d'une variable pour plus de clarté..
2. Pour être honnête, JavaScript n'a pas été conçu pour servir de langage de développement à grande échelle. TypeScript ajoute toutes ces fonctionnalités manquantes à JavaScript, ce qui le rend réellement évolutif. Avec le typage statique, l’EDI que vous utilisez sera désormais en mesure de mieux comprendre le code que vous écrivez. Cela permet à l'EDI de fournir des fonctionnalités telles que la complétion de code et la refactorisation en toute sécurité. Tout cela se traduit par une meilleure expérience de développement.
3. TypeScript vous permet également d'utiliser les dernières fonctionnalités JavaScript de votre code sans vous soucier de la prise en charge du navigateur. Une fois que vous avez écrit le code, vous pouvez le compiler facilement avec l'ancien code JavaScript pris en charge par tous les navigateurs..
4. Beaucoup de frameworks populaires comme Angular et Ionic utilisent maintenant TypeScript. Cela signifie que si vous décidez d'utiliser l'un des frameworks à l'avenir, il est judicieux d'apprendre maintenant à utiliser TypeScript..

Installation

Avant de commencer à écrire du code TypScript génial, vous devez d'abord installer TypeScript. Cela peut être fait avec l'aide de npm. Si npm n'est pas installé, vous devrez d'abord l'installer avant d'installer TypeScript. Pour installer TypeScript, vous devez démarrer le terminal et exécuter la commande suivante:

npm install -g typescript

Une fois l'installation terminée, vous pouvez vérifier la version TypeScript installée en exécutant la commande. tsc -v dans votre terminal. Si tout a été installé correctement, vous verrez le numéro de version TypeScript installé dans le terminal..

EDI et éditeurs de texte avec prise en charge de TypeScript

TypeScript a été créé par Microsoft. Le fait que Visual Studio ait été le premier environnement de développement intégré à prendre en charge TypeScript ne doit donc pas surprendre. Une fois que TypeScript a commencé à gagner en popularité, de plus en plus d'éditeurs et d'EDI ont pris en charge ce langage directement ou par le biais de plug-ins. Un autre éditeur léger et à code source ouvert appelé Visual Studio Code, créé par Microsoft, prend en charge de manière intégrée TypeScript. De même, WebStorm prend également en charge TypeScript.

Microsoft a également créé un plugin Sublime TypeScript gratuit. NetBeans a un plugin TypeScript qui fournit diverses fonctionnalités pour faciliter le développement. La coloration syntaxique est disponible dans Vim et Notepad ++ à l’aide des plug-ins typescript-vim et notepadplus-typescript, respectivement.. 

Vous pouvez voir une liste complète de tous les éditeurs de texte et IDE prenant en charge TypeScript sur GitHub. Pour les exemples de cette série, j'utiliserai le code Visual Studio pour écrire tout le code..

Compiler TypeScript en JavaScript

Disons que vous avez écrit du code TypeScript dans un .ts fichier. Les navigateurs ne pourront pas exécuter ce code par eux-mêmes. Vous devrez compiler le TypeScript en JavaScript simple, compréhensible pour les navigateurs.. 

Si vous utilisez un IDE, le code peut être compilé en JavaScript dans l'EDI lui-même. Par exemple, Visual Studio vous permet de compiler directement le code TypeScript en JavaScript. Vous devrez créer un tsconfig.json fichier dans lequel vous spécifiez toutes les options de configuration pour compiler votre fichier TypeScript en JavaScript. 

L’approche la plus conviviale pour les débutants lorsque vous ne travaillez pas sur un grand projet consiste à utiliser le terminal lui-même. Tout d'abord, vous devez vous déplacer à l'emplacement du fichier TypeScript dans le terminal, puis exécuter la commande suivante.

tsc first.ts

Cela va créer un nouveau fichier nommé first.js au même endroit. N'oubliez pas que si vous avez déjà un fichier nommé first.js, il serait écrasé.

Si vous souhaitez compiler tous les fichiers du répertoire en cours, vous pouvez le faire à l'aide de caractères génériques. Rappelez-vous que cela ne fonctionnera pas de manière récursive.

tsc * .ts 

Enfin, vous ne pouvez compiler que des fichiers spécifiques en fournissant explicitement leurs noms sur une seule ligne. Dans ce cas, les fichiers JavaScript seront créés avec les noms de fichiers correspondants..

tsc first.ts product.ts bot.ts

Jetons un coup d'oeil au programme suivant, qui multiplie deux nombres dans TypeScript.

Soit a: nombre = 12; Soit b: nombre = 17; function showProduct (premier: nombre, deuxième: nombre): void console.log ("Le produit est:" + premier * deuxième);  showProduct (a, b);

Le code TypeScript ci-dessus est compilé en code JavaScript suivant lorsque la version ciblée est définie sur ES6. Notez que toutes les informations de type que vous avez fournies dans TypeScript ont maintenant disparu après la compilation. En d’autres termes, le code est compilé en JavaScript, ce qui peut être compris par le navigateur, mais vous devez effectuer le développement dans un environnement bien meilleur, ce qui peut vous aider à détecter beaucoup de bugs..

Soit a = 12; soit b = 17; function showProduct (premier, deuxième) console.log ("Le produit est:" + premier * deuxième);  showProduct (a, b);

Dans le code ci-dessus, nous avons spécifié le type de variables une et b en chiffres. Cela signifie que si plus tard vous essayez de définir la valeur de b à une chaîne comme "apple", TypeScript vous indiquera une erreur indiquant que "apple" n'est pas assignable au type nombre. Votre code sera toujours compilé en JavaScript, mais ce message d'erreur vous indiquera que vous avez commis une erreur et vous évitera un problème lors de l'exécution.. 

Voici une capture d'écran qui montre le message d'erreur dans le code Visual Studio:

L'exemple ci-dessus montre comment TypeScript continue de vous donner des conseils sur les erreurs possibles dans le code. Cet exemple est très basique, mais lorsque vous créez de très gros programmes, des messages comme celui-ci vous aident grandement à écrire du code robuste avec moins de risque d'erreur..

Dernières pensées

Ce didacticiel de mise en route de la série avait pour but de vous donner un très bref aperçu des différentes fonctionnalités de TypeScript et de vous aider à installer le langage, ainsi que des suggestions pour les IDE et les éditeurs de texte que vous pouvez utiliser pour le développement. La section suivante a présenté différentes manières de compiler votre code TypeScript en JavaScript et vous a montré comment TypeScript peut vous aider à éviter certaines erreurs courantes..

J'espère que vous avez aimé ce tutoriel. Si vous avez des questions, s'il vous plaît laissez-moi savoir dans les commentaires. Le prochain tutoriel de la série traitera des différents types de variables disponibles dans TypeScript..