Qu'est-ce que TypeScript et pourquoi les développeurs devraient-ils l'essayer?

Added 2020-02-05

JavaScript est un langage de programmation unique. Il est conçu pour le développement Web et a des règles différentes des autres langages de programmation.

L'une des différences les plus notables est que JavaScript est typé dynamiquement, ce qui signifie que vous n'avez pas à déclarer de types lors de la création de variables. Des langages comme C, C # et Java vous feront déclarer des types de variables. Ces variables sont appelées variables de type statique.

Les langages qui utilisent des variables typées statiquement peuvent offrir plus de stabilité et réduire les erreurs de code. TypeScript comble le fossé entre JavaScript et les règles de programmation traditionnelles.

Types de variables

letype de la variable correspond aux informations que vous prévoyez de stocker dans la variable.

Voici une variable Java, par exemple:

int myNumber = 10;

Cette variable est unint, qui est l'abréviation de integer. Cela vous permet de savoir que la variablemon numéroprévoit de stocker un entier. Si vous essayez de stocker une valeur différente dans la variable, comme une chaîne de caractères, le programme ne s'exécutera pas.

Voici quelques types de variables supplémentaires que vous avez pu utiliser:

int - nombres réguliers
float: nombres décimaux
char: caractères uniques comme «x» ou «a»
chaîne — une série de caractères comme “Bonjour” et “Ceci est une chaîne”
booléen: valeurs vraies ou fausses

JavaScript n'exige pas que vous déclariez des types de variables. Bien que cela vous donne plus de liberté, cela peut entraîner de très mauvaises habitudes. C'est là que TypeScript vous facilite la tâche.

Qu'est-ce que TypeScript?

TypeScript est une version de JavaScript développée par Microsoft qui introduit des types de variables dans votre code. Ce n’est pas un tout nouveau langage; pensez-y comme un wrapper sur du JavaScript simple. Il a une syntaxe très similaire à JavaScript, il est donc facile de commencer.

Pour montrer à quel point ils sont similaires, voici une ligne de code en JavaScript et en TypeScript.

JavaScript:

laissez myNumber = 10;

Manuscrit:

laissez myNumber: number = 10;

Lorsque vous déclarez une variable dans TypeScript, vous déclarez le type en même temps. C’est un petit changement qui a un grand impact.

Il n'y a cependant aucun logiciel supplémentaire à télécharger; Les fichiers TypeScript sont compilés en fichiers JavaScript standard qui peuvent être utilisés dans n'importe quelle application Web. Les fichiers TypeScript sont enregistrés sous.TS des dossiers.

Comment installer TypeScript

Il est facile de commencer avec TypeScript:

Via le gestionnaire de packages Node.js (NPM)
Installation des plugins Visual Studio de TypeScript

L'installation avec NPM est facile avec la ligne de commande:

> npm install -g typescript

Si vous utilisez Visual Studio 2017 ou Visual Studio 2015 Update 3, vous avez déjà inclus TypeScript. S'il n'est pas installé, vous pouveztéléchargez-le sur le site Web de TypeScript.

Avantages de TypeScript

JavaScript est déjà assez génial, quels sont les avantages d'utiliser plutôt TypeScript? Il existe de nombreuses raisons d'utiliser TypeScript pour le développement Web.

Variables typées

TypeScript vous permet d'affecter des types à des variables dans votre code. Vous avez vu l'exemple au début, mais comment cela vous aide-t-il?

Devoir affecter des types à vos variables peut faire de vous un meilleur codeur. Cela vous oblige à réfléchir à chaque variable que vous écrivez lors de la planification de votre application. Cela empêche les erreurs de se produire plus tard dans le code, rend votre application facile à lire et rend votre code un jeu d'enfant à tester.

TypeScript vous donne beaucoup d'options pour créer des variables.

Nombres

laissez myNumber: number = 10;

Cordes

laissez myString: string = "TypeScript";

Variables booléennes

laissez myBoolean: boolean = true;

Tableaux

Lorsque vous définissez un tableau, vous utiliserez le type de valeur contenu dans le tableau suivi de crochets.

laissez myArray: number [] = [1,2,3];

Tout

Ce type de variable est utilisé lorsque vous souhaitez que TypeScript autorise tout type de type à être affecté à la variable. Cela vous donne plus de flexibilité lorsque vous n'êtes pas sûr de ce que pourrait devenir votre variable.

Vous pouvez modifier librement la valeur de ces variables.

laissez anyType: any = 10;
anyType = "Bonjour"; //Pas d'erreur
anyType = true; // Toujours pas d'erreur

Néant

Les types de vide sont utilisés lorsque vous ne souhaitez affecter aucun type à la variable. C'est idéal pour les fonctions qui ne renvoient aucune valeur.

function randomMessage (): void {Console.log ("Ce n'est qu'un message"); }

Nul

Vous donne simplement une valeur nulle.

laissez myNull: null = null; // C'est tout ce que vous pouvez faire

Indéfini

Tout aussi simple, cela vous donne une valeur indéfinie.

laissez myUndefined: undefined = undefined; // C'est tout ce que vous pouvez faire

Fonctionnalités ajoutées

TypeScript vous offre quelques fonctionnalités et types supplémentaires qui vous permettent de faire plus avec JavaScript.

Tuple

Un tuple est un tableau spécial que vous déclarez avec un nombre fixe d'éléments. Ces éléments peuvent avoir différents types, mais le tuple doit s'en tenir aux types dans l'ordre que vous déclarez.

laissez myTuple: [nombre, chaîne];
myTuple = [45, "Bonjour"];
myTuple = ["Bonjour", 45]; // Erreur

Types d'énumération

Les types d'énumération sont un type spécial qui attribue des valeurs numériques à une série

enum Couleur {Rouge, Vert, Bleu}

Dans cette énumération, Red a la valeur 0, Green est 1 et Blue est 2. Les énumérations sont indexées zéro, tout comme les tableaux en JavaScript.

Classes d'objets

Les classes d'objets, les interfaces et l'héritage sont tous pris en charge dans TypeScript.

JavaScript n'a pas de véritable système de classes pour la programmation orientée objet. JavaScript utilise un système prototype très similaire, mais pas entièrement identique. Si vous venez d'un arrière-plan orienté objet, cela seul pourrait vous vendre sur TypeScript.

Vous pouvez créer une classe avec des constructeurs

Élève de la classe {
Nom: chaîne; constructeur (premier, milieu, dernier) {
this.Name = premier + "" + milieu + "" + dernier; }
}
let newStudent = new Student ("John", "Leonard", "Smith");

Vous pouvez créer une interface et l'utiliser comme type.

interface Personne {
 personName: chaîne;
fonction sayHello (personne: personne) {
 retourner "Bonjour" + person.personName;
}

Les fonctions

TypeScript déclare également les types dans les fonctions.

fonction addNum (num1: nombre, num2: nombre) {
 return num1 + num2;
}

Vous pouvez également utiliser des paramètres par défaut dans vos fonctions. Ils sont utiles lorsque vous avez une valeur que vous souhaitez définir dans vos paramètres dans le cas où votre fonction est exécutée sans argument.

fonction addNums (num1: nombre, num2 = 15) {
 return num1 + num2;
}
addNums (5,5); // Cela retournera 10
addNums (5); // Cela retournera 20. Il n'y avait pas de deuxième valeur, donc le paramètre par défaut de 15 est utilisé

Le compilateur TypeScript aide à tester le code

JavaScript exécuté dans le navigateur Web est génial car il est simple. TypeScript utilise un compilateur pour traduire le code dans un fichier JavaScript, mais n'est-ce pas juste un travail supplémentaire?

Pas du tout! Le compilateur TypeScript peut vous aider à tester votre code lors de l'écriture. Lorsque vous exécutez un fichier TypeScript dans votre IDE, il signalera les erreurs au fur et à mesure.

Débogage TypeScript dans Visual Studio Code IDE

Réduire ces erreurs dans votre IDE nettoiera votre code. Au moment où vous compilez en JavaScript simple, la précision de votre code a été vérifiée. Le compilateur TypeScript peut être personnalisé selon vos préférences de programmation.

Open source

TypeScript est open-source et créé par Microsoft. Les logiciels open source présentent de nombreux avantages. La communauté des développeurs travaille constamment pour corriger les bugs ou ajouter de nouvelles fonctionnalités.

Fonctionne avec d'autres cadres Web

Si vous codez une application Web, les frameworks sont conçus pour vous faire gagner du temps. Étant donné que JavaScript est le roi des scripts de développement Web, de nombreux cadres sont utilisés. Beaucoup de ces cadres sont très populaires.

TypeScript ne vous retient pas5 Cadres Web à apprendre pour les développeursen utilisant ces cadres Web très utiles5 Cadres Web à apprendre pour les développeurs 5 Cadres Web à apprendre pour les développeurs Intéressé à apprendre le développement Web avancé? Évitez d'écrire du code répétitif --- utilisez plutôt ces cadres de développement Web. Lire la suite . Il est compatible avec React, Angular, Express, Babel, Vue.js, ASP.NET Core et React Native.

Développement Web et JavaScript

TypeScript a été créé pour faciliter le développement Web et d'applications pour les développeurs JavaScript. Il est assez important que vous ayez une fondation avecQu'est-ce que JavaScript et comment fonctionne-t-il?JavaScript et son fonctionnementQu'est-ce que JavaScript et comment fonctionne-t-il? Qu'est-ce que JavaScript et comment ça marche? Si vous apprenez le développement Web, voici ce que vous devez savoir sur JavaScript et comment il fonctionne avec HTML et CSS. Lire la suite avant de plonger dans TypeScript.