Divulgation des affiliés: En achetant les produits que nous recommandons, vous contribuez à maintenir le site en vie. Lire la suite.

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

le type 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 un int, qui est l'abréviation de integer. Cela vous permet de savoir que la variable mon numéro pré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:

let myNumber = 10;

Manuscrit:

let 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.

TypeScript est un langage compilé, contrairement à JavaScript qui s'exécute dans le navigateur. Les langues compilées peuvent être plus rapides et donner lieu à des programmes plus efficaces






Pourquoi certains langages de programmation sont-ils plus rapides que d'autres?
Il existe de nombreux langages de programmation. Ils ont tous des bizarreries individuelles, utilisées pour différentes choses. Mais qu'est-ce qui rend un langage de programmation plus rapide qu'un autre?
Lire la suite

.

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 pouvez le télécharger via le site Web 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

let myNumber: number = 10;

Cordes

let myString: string = "TypeScript";

Variables booléennes

let myBoolean: boolean = true;

Tableaux

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

let 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.

let anyType: any = 10;
anyType = "Hello"; //No error
anyType = true; //Still no error

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("This is just a message"); }

Nul

Vous donne simplement une valeur nulle.

let myNull: null = null; //This is all you can do

Indéfini

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

let myUndefined: undefined = undefined; //This is all you can do

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.

let myTuple: (number,string);
myTuple = (45, "Hello");
myTuple = ("Hello", 45); // Error

Types d'énumération

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

enum Color { Red, Green, Blue }

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

class Student { 
Name: string; constructor(first,middle,last) { 
this.Name = first + " " + middle + " " + last; } 
}

let newStudent = new Student("John", "Leonard","Smith");

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

interface Person {
 personName: string;

function sayHello(person: Person) {
 return "Hello " + person.personName;
}

Les fonctions

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

function addNum(num1: number, num2: number) {
 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.

function addNums(num1: number, num2 = 15) {
 return num1 + num2;
}

addNums(5,5); // This will return 10
addNums(5); // This will return 20. There was no second value, so the default parameter of 15 is used

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.

TypeScript fonctionne bien avec Visual Studio et Visual Studio Code. Visual Studio Code est un excellent choix pour travailler en JavaScript






Les 5 meilleurs éditeurs Javascript pour les codeurs et programmeurs productifs
De nos jours, il n'y a que cinq éditeurs qui méritent votre attention lors de l'écriture de JavaScript. Vous pouvez trouver des dizaines d'alternatives, mais aucune d'entre elles ne tient une bougie à celles-ci, alors ne perdez pas votre temps.
Lire la suite

vous avez donc une longueur d'avance si vous décidez de l'utiliser.

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 empêche pas d'utiliser ces cadres Web très utiles






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 très important que vous ayez une fondation avec JavaScript et comment cela fonctionne






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.

Envie d'un défi? Téléchargez TypeScript et essayez un projet courant comme la création d'un diaporama JavaScript






Comment créer un diaporama JavaScript en 3 étapes faciles
Aujourd'hui, je vais vous montrer comment créer un diaporama Javacript à partir de zéro – allons-y!
Lire la suite

. Développez vos connaissances et vous serez bientôt un expert en développement Web!