Tutoriel TypeScript: Connaître les principes de base de TypeScript

TypeScript est un sur-ensemble fortement typé de qui compile en JavaScript brut. Vous pouvez utiliser ce langage pour le développement JavaScript à l'échelle de l'application. En outre, il peut être exécuté sur n'importe quel navigateur, n'importe quel hôte et n'importe quel système d'exploitation. Dans ce didacticiel TypeScript, nous allons entrer dans la profondeur de TypeScript et comprendre les bases dans la séquence suivante:

• Introduction à TypeScript
• Types TypeScript
• Variables
• Les opérateurs
• Boucles
• Les fonctions
• Cordes
• Tableaux
• Interfaces
• Des classes
• Objets
• Cas d'utilisation de TypeScript

Introduction à TypeScript

TypeScript est un sur-ensemble typé de JavaScript qui se compile en JavaScript brut. TypeScript est purement orienté objet avec des classes, des interfaces et des langages de programmation statiquement typés comme C # ou . Il nécessite un compilateur pour compiler et générer dans un fichier JavaScript. Fondamentalement, TypeScript est la version ES6 de JavaScript avec quelques fonctionnalités supplémentaires.

Un code TypeScript est écrit dans un fichier avec Extension .ts puis compilé en JavaScript à l'aide du compilateur. Vous pouvez écrire le fichier dans n'importe quel éditeur de code et le compilateur doit être installé sur votre plate-forme. Après l'installation, la commande tsc .ts compile le code TypeScript dans un simple fichier JavaScript.

Syntaxe:

var message: string = 'Bienvenue dans Edureka!' console.log (message)

Lors de la compilation, il génère le code JavaScript suivant:

// Généré par typescript 1.8.10 var message = 'Bienvenue dans Edureka!' console.log (message)

Caractéristiques de TypeScript

• Multiplateforme: Le compilateur TypeScript peut être installé sur n'importe quel système d'exploitation tel que Windows, MacOS et Linux.

  
  
  

• Langage orienté objet : TypeScript fournit des fonctionnalités telles que Des classes , Interfaces et Modules. Ainsi, il peut écrire du code orienté objet pour le développement côté client et côté serveur.

• Vérification de type statique : TypeScript utilise le typage statique et facilite la vérification de type au moment de la compilation. Ainsi, vous pouvez trouver des erreurs lors de l'écriture du code sans exécuter le script.

• Saisie statique facultative : TypeScript permet également le typage statique facultatif au cas où vous utiliseriez le typage dynamique de JavaScript.

• Manipulation DOM : Vous pouvez utiliser TypeScript pour manipuler le DOM pour ajouter ou supprimer des éléments.

• Caractéristiques de l'ES 6 : TypeScript inclut la plupart des fonctionnalités d'ECMAScript 2015 (ES 6, 7) planifiées telles que la classe, l'interface, les fonctions Arrow, etc.

Avantages de l'utilisation de TypeScript

• TypeScript est rapide, simple, facile à apprendre et fonctionne sur n'importe quel navigateur ou moteur JavaScript.

• Il est similaire à JavaScript et utilise la même syntaxe et la même sémantique.

• Cela aide les développeurs backend à écrire front-end coder plus vite .

• Le code TypeScript peut être appelé à partir d'un code JavaScript existant . En outre, il fonctionne avec les frameworks et bibliothèques JavaScript existants sans aucun problème.

• Le fichier Definition, avec l'extension .d.ts, prend en charge les bibliothèques JavaScript existantes telles que Jquery, D3.js , etc. Ainsi, le code TypeScript peut ajouter Bibliothèques JavaScript utiliser des définitions de type pour profiter des avantages de la vérification de type, de la saisie semi-automatique du code et de la documentation dans les bibliothèques JavaScript existantes à typage dynamique.

• Il comprend des fonctionnalités de ES6 et ES7 qui peut fonctionner dans les moteurs JavaScript de niveau ES5 comme Node.js .

Maintenant que vous avez compris ce qu'est TypeScript, passons à ce didacticiel TypeScript et examinons les différents types.

Types TypeScript

Le système de types représente les différents types de valeurs pris en charge par la langue. Il vérifie le validité du fourni valeurs avant qu'ils ne soient stockés ou manipulés par le programme.

Il peut être classé en deux types tels que:

• Intégré : Cela inclut nombre, chaîne, booléen, void, null et undefined.
• Défini par l'utilisateur : Il inclut les énumérations (énumérations), les classes, les interfaces, les tableaux et le tuple.

Passons maintenant à ce didacticiel TypeScript et apprenons-en davantage sur les variables.

Tutoriel TypeScript: Variables

Une variable est un espace nommé dans la mémoire qui est utilisé pour stocker des valeurs.

La syntaxe de type pour déclarer une variable dans TypeScript inclut un deux-points (:) après le nom de la variable, suivi de son type. Semblable à JavaScript, nous utilisons le mot-clé var pour déclarer une variable.

Il existe quatre options lorsque nous déclarons une variable:

var [identificateur]: [type-annotation] = valeur

var [identifiant]: [type-annotation]

var [identifiant] = valeur

var [identifier]

Exemple:

var name: string = 'Daisy' var empid: number = 1001 console.log ('name' + name) console.log ('employee id' + empid)

Lors de la compilation, il générera le code JavaScript suivant:

// Généré par typescript 1.8.10 var name = 'Daisy' var empid = 1001 console.log ('name' + name) console.log ('employee id:' + empid)

Production:

nom: Daisy
identifiant d'employé: 1001

Passons maintenant au sujet suivant de notre didacticiel TypeScript.

Les opérateurs

Un opérateur permet de définir les fonctions qui seront exécutées sur les données. Les données sur lesquelles les opérateurs travaillent sont appelées opérandes. Il existe différents types de les opérateurs dans TypeScript comme:

• Opérateurs arithmétiques
• Opérateurs logiques
• Opérateurs relationnels
• Opérateurs au niveau du bit
• Opérateurs d'affectation

Opérateurs arithmétiques

Exemple:

var num1: number = 10 var num2: number = 2 var res: number = 0 res = num1 + num2 console.log ('Sum:' + res) res = num1 - num2 console.log ('Difference:' + res) res = num1 * num2 console.log ('Produit:' + res)

Production:

Somme: 12
Différence: 8
Produit: 20

Opérateurs logiques

Exemple:

var avg: number = 20 var pourcentage: number = 90 console.log ('Value of avg:' + avg + ', value of percent:' + pourcentage) var res: boolean = ((avg> 50) && (pourcentage> 80 )) console.log ('(avg> 50) && (pourcentage> 80):', res)

Production:

Valeur moyenne: 20, valeur du pourcentage: 90
(moy> 50) && (pourcentage> 80): faux

Opérateurs relationnels

Exemple:

var num1: number = 10 var num2: number = 7 console.log ('Value of num1:' + num1) console.log ('Value of num2:' + num2) var res = num1> num2 console.log ('num1 supérieur à num2: '+ res) res = num1
 Production: 
Valeur de num1: 10 
 Valeur de num2: 7 
 num1 supérieur à num2: vrai 
 num1 inférieur à num2: faux
 Opérateurs au niveau du bit 
 Les opérateurs 
 La description 
 ET au niveau du bit (&) 
effectue une opération booléenne AND sur chaque bit de ses arguments entiers.
 OU au niveau du bit (|) 
Il effectue une opération booléenne OU sur chaque bit de ses arguments entiers.
quelle idée utiliser pour java
 XOR au niveau du bit (^) 
Il effectue une opération OU exclusive booléenne sur chaque bit de ses arguments entiers.
 PAS au niveau du bit (~) 
Il s'agit d'un opérateur unaire et fonctionne en inversant tous les bits de l'opérande.
 Décalage à gauche (<<) 
Il déplace tous les bits de son premier opérande vers la gauche du nombre de places spécifié dans le deuxième opérande.
 Décalage à droite (>>) 
La valeur de l'opérande de gauche est déplacée vers la droite du nombre de bits spécifié par l'opérande de droite.
 Décalage à droite avec zéro (>>>) 
Il est similaire à l'opérateur >>, sauf que les bits décalés vers la gauche sont toujours à zéro.
 Exemple: 
var a: number = 2 // Présentation de bits 10 var b: number = 3 // Présentation de bits 11 var result result = (a & b) console.log ('(a & b) =>', result) result = ( a | b) console.log ('(a | b) =>', résultat)
 Production: 
(a & b) => 2 
 (a | b) => 3
 Opérateurs d'affectation 
 Les opérateurs 
 La description 
 Affectation simple (=) 
Attribue des valeurs de l'opérande de droite à l'opérande de gauche
 Ajouter et attribuer (+ =) 
Il ajoute l'opérande droit à l'opérande gauche et affecte le résultat à l'opérande gauche.
 Soustraire et attribuer (- =) 
Il soustrait l'opérande droit de l'opérande gauche et affecte le résultat à l'opérande gauche.
 Multiplier et attribuer (* =) 
Il multiplie l'opérande droit par l'opérande gauche et affecte le résultat à l'opérande gauche.
 Diviser et attribuer (/ =) 
Il divise l'opérande de gauche par l'opérande de droite et affecte le résultat à l'opérande de gauche.
 Exemple: 
var a: nombre = 12 var b: nombre = 10 a = b console.log ('a = b:' + a) a + = b console.log ('a + = b:' + a) a - = b console .log ('a- = b:' + a)
 Production: 
a = b: 10 
 a + = b: 20 
 a - = b: 10
C'étaient les différents opérateurs. Passons maintenant à notre didacticiel TypeScript et découvrons les boucles.
 Boucles 
Il peut y avoir des situations où un bloc de code doit être exécuté plusieurs fois. UNE boucle instruction nous permet d'exécuter une instruction ou un groupe d'instructions plusieurs fois.
Les boucles TypeScript peuvent être classées comme suit:
 Pour la boucle 
La pour boucle est une implémentation d'une boucle définie.
 Syntaxe: 
for (première expression deuxième expression troisième expression) {// instructions à exécuter à plusieurs reprises}
Ici, la première expression est exécutée avant le début de la boucle. La deuxième expression est la condition d'exécution de la boucle. Et la troisième expression est exécutée après l'exécution de chaque bloc de code.
 Exemple: 
pour (soit i = 0 i<2 i++) { console.log ('Execute block statement' + i) }
 Production: 
Exécuter l'instruction de bloc 0 
Exécuter l'instruction de bloc 1
 Alors que la boucle 
La boucle while exécute les instructions à chaque fois que la condition spécifiée est évaluée à true.
 Syntaxe: 
while (expression de condition) {// bloc de code à exécuter}
 Exemple: 
soit i: nombre = 1 tandis que (i<3) { console.log( 'Block statement execution no.' + i ) i++ }
 Production: 
Exécution de l'instruction de bloc n ° 1 
Exécution de l'instruction de bloc n ° 2
 Boucle Do..While 
La boucle do & hellip while est similaire à la boucle while sauf qu'elle n'évalue pas la condition pour la première fois que la boucle s'exécute.
 Syntaxe: 
do {// bloc de code à exécuter} while (expression de condition)
 Exemple: 
  
let i: number = 1 do {console.log ('Block statement execution no.' + i) i ++} while (i<3)
 Production: 
Exécution de l'instruction de bloc n ° 1 
Exécution de l'instruction de bloc n ° 2
En dehors de ceux-ci, il existe les instructions break et continue de TypeScript qui sont utilisées dans une boucle.
 Déclaration de rupture 
L'instruction break est utilisée pour prendre le contrôle d'une construction. L'utilisation de l'instruction break dans une boucle aide le programme à quitter la boucle.
 Exemple: 
var i: nombre = 1 tandis que (i<=10) { if (i % 5 == 0) { console.log ('The first multiple of 5 between 1 and 10 is : '+i) break //exit the loop if the first multiple is found } i++ } //outputs 5 and exits the loop
 Production: 
Le premier multiple de 5 entre 1 et 10 est: 5
 Continuer la déclaration 
L'instruction continue ignore les instructions suivantes dans l'itération actuelle et ramène le contrôle au début de la boucle.
 Exemple: 
var num: number = 0 var count: number = 0 for (num = 0num<=10num++) { if (num % 2==0) { continue } count++ } console.log (' The count of odd values between 0 and 10 is: '+count)
 Production: 
Le nombre de valeurs impaires entre 0 et 10 est: 5
Ce sont les différentes boucles de TypeScript. Maintenant, allons de l'avant avec notre didacticiel TypeScript et comprenons les fonctions.
 Les fonctions 
En JavaScript, les fonctions sont l'une des parties les plus importantes car il s'agit d'un langage de programmation fonctionnel. Les fonctions garantissent que le programme est maintenable et réutilisable, et organisé en blocs lisibles. Alors que TypeScript fournit le concept de classes et de modules, les fonctions font toujours partie intégrante du langage.
 Fonctions nommées 
Une fonction nommée est utilisée pour déclarer et appeler une fonction par son nom donné.
 Exemple: 
function display () {console.log ('TypeScript Function')} display ()
 Production: 
Fonction TypeScript
 Fonction anonyme 
Une fonction anonyme est une fonction qui est définie comme une expression. Cette expression est stockée dans une variable. Ces fonctions sont appelées à l'aide du nom de variable dans lequel la fonction est stockée.
 Exemple: 
let salutation = fonction () {console.log ('Fonction TypeScript')} salutation ()
 Production: 
Fonction TypeScript
 Fonction de flèche 
Les notations de grosse flèche sont utilisées pour les fonctions anonymes, c'est-à-dire pour les expressions de fonction. Elles sont également appelées fonctions lambda dans d'autres langages.
 Syntaxe: 
(param1, param2, ..., paramN) => expression
L'utilisation de la grosse flèche (=>) supprime la nécessité d'utiliser le mot-clé «fonction». Les paramètres sont passés entre crochets angulaires et l'expression de la fonction est placée entre accolades {}.
 Exemple: 
let sum = (x: number, y: number): number => {return x + y} sum (10, 30) // renvoie 40
 Surcharge de fonction 
TypeScript fournit le concept de surcharge de fonctions. Ainsi, vous pouvez avoir plusieurs fonctions avec le même nom mais différents types de paramètres et types de retour.
 Exemple: 
function add (a: string, b: string): string function add (a: number, b: number): number return a + b} add ('Hello', 'Edureka') // renvoie 'Hello Edureka' add ( 10, 10) // renvoie 20
Dans l'exemple ci-dessus, nous avons la même fonction add () avec deux déclarations de fonction et une implémentation de fonction. La première signature a deux paramètres de type string, tandis que la seconde signature a deux paramètres du type number.
Ce sont les différents types de fonctions. Maintenant, passons à notre didacticiel TypeScript et comprenons les chaînes de TypeScript.
 Tutoriel TypeScript: Chaînes 
La  est un autre type de données primitif utilisé pour stocker des données texte. Les valeurs de chaîne sont entourées de guillemets simples ou de guillemets doubles.
 Syntaxe: 
var var_name = new String (chaîne)
Il existe différentes propriétés des méthodes disponibles dans l'objet String, telles que:
 Constructeur - Il renvoie une référence à la fonction String qui a créé l'objet
 Longueur - Cela renvoie la longueur de la chaîne
 Prototype - Cette propriété vous permet d'ajouter des propriétés et des méthodes à un objet
 Exemple: 
let name = new String ('Welcome to Edureka!') console.log ('Message:' + name) console.log ('Length:' + name.length)
 Production: 
Message: Bienvenue à Edureka! 
 Longueur: 19
 Méthodes de chaîne 
La liste des méthodes dans String Object comprend:
 Méthode 
 La description 
 charAt () 
Il renvoie le caractère à l'index spécifié
 charCodeAt () 
Il renvoie un nombre indiquant la valeur Unicode du caractère à l'index donné
 concat () 
Combine le texte de deux chaînes et renvoie une nouvelle chaîne
 Indice de() 
Renvoie l'index dans l'objet String appelant de la première occurrence de la valeur spécifiée
 lastIndexOf () 
Il renvoie l'index dans l'objet String appelant de la dernière occurrence de la valeur spécifiée
 rencontre() 
Utilisé pour faire correspondre une expression régulière à une chaîne
 localeCompare () 
Renvoie un nombre indiquant si une chaîne de référence vient avant ou après ou est la même que la chaîne donnée dans l'ordre de tri
 chercher() 
Ceci exécute la recherche d'une correspondance entre une expression régulière et une chaîne spécifiée
 remplacer() 
Utilisé pour trouver une correspondance entre une expression régulière et une chaîne, et pour remplacer la sous-chaîne correspondante par une nouvelle sous-chaîne
 tranche() 
Il extrait une section d'une chaîne et renvoie une nouvelle chaîne
 Divisé() 
Divise un objet String en un tableau de chaînes en séparant la chaîne en sous-chaînes
 substr () 
Renvoie les caractères d'une chaîne commençant à l'emplacement spécifié par le nombre de caractères spécifié
 sous-chaîne () 
Il renvoie les caractères d'une chaîne entre deux index dans la chaîne
 toLocaleLowerCase () 
Les caractères d'une chaîne sont convertis en minuscules tout en respectant les paramètres régionaux actuels
 toLocaleUpperCase () 
Les caractères d'une chaîne sont convertis en majuscules tout en respectant les paramètres régionaux actuels
 toLowerCase () 
Il renvoie la valeur de la chaîne appelante convertie en minuscules
 toUpperCase () 
Il renvoie la valeur de la chaîne appelante convertie en majuscules
 toString () 
Renvoie une chaîne représentant l'objet spécifié
 valeur de() 
Renvoie la valeur primitive de l'objet spécifié
 Exemple: 
let str: string = 'Welcome to Edureka' str.charAt (0) // renvoie 'w' str.charAt (2) // renvoie 'l' 'Welcome to Edureka'.charAt (2) renvoie' l 'let str1 : string = 'welcome' let str2: string = 'Edureka' str1.concat (str2) // renvoie 'welcomeEdureka' str1.concat ('', str2) // renvoie 'welcome Edureka' str1.concat ('' to ' ') // renvoie' bienvenue à '
Maintenant que vous connaissez les chaînes, passons à ce didacticiel TypeScript et comprenons les tableaux.
 Tableaux dans TypeScript 
Une tableau est un type spécial de type de données qui stocke plusieurs valeurs de différents types de données séquentiellement à l'aide d'une syntaxe spéciale. Les éléments du tableau sont identifiés par un entier unique appelé indice ou index de l'élément.
 Syntaxe: 
var array_name [: datatype] // déclaration array_name = [val1, val2, valn ..] // initialisation
 Exemple: 
let names: Array names = ['John', 'Daisy', 'Rachel'] let ids: Array ids = [101, 700, 321]
 Méthodes de tableau 
Voici une liste des différentes méthodes Array qui peuvent être utilisées à différentes fins:
 Méthode 
 La description 
 filtre() 
Crée un nouveau tableau avec tous les éléments de ce tableau pour lesquels la fonction de filtrage fournie renvoie true
 chaque() 
Renvoie true si chaque élément de ce tableau satisfait la fonction de test fournie
 concat () 
Renvoie un nouveau tableau composé de ce tableau joint à d'autres tableaux
CV développeur Java Front End
 Indice de() 
Renvoie le premier ou le plus petit index d'un élément dans le tableau égal à la valeur spécifiée
 pour chaque() 
Appelle une fonction pour chaque élément du tableau
 joindre() 
Joint tous les éléments d'un tableau dans une chaîne
 lastIndexOf () 
Renvoie le dernier ou le plus grand index d'un élément du tableau égal à la valeur spécifiée
 carte() 
Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément de ce tableau
 poussez() 
Ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur du tableau
 pop () 
Supprime le dernier élément d'un tableau et renvoie cet élément
 réduire() 
Appliquer une fonction simultanément à deux valeurs du tableau de gauche à droite pour le réduire à une seule valeur
 réduireDroite () 
Appliquer une fonction simultanément sur deux valeurs du tableau de droite à gauche pour le réduire à une seule valeur
 sens inverse() 
Inverse l'ordre des éléments d'un tableau
 décalage() 
Supprime le premier élément d'un tableau et renvoie cet élément
 tranche() 
Extrait une section d'un tableau et renvoie un nouveau tableau
 certains() 
Il renvoie true si au moins un élément de ce tableau satisfait la fonction de test fournie
 Trier() 
Il trie les éléments d'un tableau
 toString () 
Renvoie une chaîne représentant le tableau et ses éléments
 épissure() 
Il ajoute et / ou supprime des éléments d'un tableau
 décaler () 
Ajoute un ou plusieurs éléments à l'avant d'un tableau et renvoie la nouvelle longueur du tableau
 Exemple: 
var name: Array = ['John', 'Daisy', 'Tara'] name.sort () console.log (name) // sortie: ['Daisy', 'John', 'Tara'] console.log ( name.pop ()) // sortie: Tara name.push ('Rachel') console.log (nom) // sortie: ['John', 'Daisy', 'Rachel']
Passons maintenant à ce didacticiel TypeScript et apprenons-en davantage sur les interfaces.
 Interfaces TypeScript 
L'interface est une structure qui définit le contrat dans votre application. Il définit la syntaxe des classes à suivre. Il ne contient que la déclaration des membres et il est de la responsabilité de la classe dérivée de définir les membres.
 Exemple: 
interface Employee {empID: number empName: string getSalary: (number) => number // flèche fonction getManagerName (number): string}
Dans l'exemple ci-dessus, le Employé l'interface comprend deux propriétés empID et empName . Il comprend également une déclaration de méthode getSalaray en utilisant un fonction flèche qui comprend un paramètre numérique et un type de retour numérique. La getManagerName La méthode est déclarée en utilisant une fonction normale.
 Manuscrit  Des classes 
TypeScript a introduit des classes afin qu'elles puissent profiter des avantages des techniques orientées objet comme l'encapsulation et l'abstraction. La classe de TypeScript est compilée en fonctions JavaScript simples par le compilateur TypeScript pour fonctionner sur les plates-formes et les navigateurs.
Une classe comprend les éléments suivants:
 Constructeur 
 Propriétés 
 Méthodes 
 Exemple: 
class Employee {empID: number empName: string constructor (ID: number, name: string) {this.empName = name this.empID = ID} getSalary (): number {return 40000}}
 Héritage 
TypeScript prend en charge Héritage car c'est la capacité d'un programme à créer de nouvelles classes à partir d'une classe existante. La classe qui est étendue pour créer des classes plus récentes est appelée la classe parente ou la super classe. Les classes nouvellement créées sont appelées les classes enfant ou sous.
Une classe hérite d’une autre classe à l’aide du mot-clé ‘extend’. Les classes enfants héritent de toutes les propriétés et méthodes à l'exception des membres privés et des constructeurs de la classe parent. Mais TypeScript ne prend pas en charge l'héritage multiple.
 Syntaxe: 
class child_class_name étend le parent_class_name
 Exemple: 
class Person {name: string constructor (name: string) {this.name = name}} class Employé étend Person {empID: number constructor (empID: number, name: string) {super (name) this.empID = empid} displayName (): void {console.log ('Name =' + this.name + ', Employee ID =' + this.empID)}} let emp = new Employee (701, 'Jason') emp.displayName () // Nom = Jason, ID d'employé = 701
Maintenant que vous connaissez les classes, allons de l'avant avec ce didacticiel TypeScript et découvrez les objets.
 Objets dans TypeScript 
Un objet est une instance qui contient un ensemble différent de paires clé-valeur. Les valeurs peuvent être des valeurs ou des fonctions scalaires ou même un tableau d'autres objets.
 Syntaxe: 
var nom_objet = {clé1: 'valeur1', // valeur scalaire clé2: 'valeur', clé3: fonction () {// fonctions}, clé4: ['contenu1', 'contenu2']
Un objet peut contenir des valeurs scalaires, des fonctions et des structures telles que des tableaux et des tuples.
 Exemple: 
var person = {firstname: 'Danny', lastname: 'Green'} // accéder aux valeurs de l'objet console.log (person.firstname) console.log (person.lastname)
Lors de la compilation, il générera le même code en JavaScript.
 Production: 
Danny 
 vert
Ce sont les différents éléments importants de TypeScript. Maintenant, passons à ce didacticiel TypeScript et jetons un œil à un exemple pour comprendre le cas d'utilisation.
 Tutoriel TypeScript: cas d'utilisation 
Ici, nous allons apprendre à convertir un existant  à TypeScript.
Lorsque nous compilons un fichier TypeScript, il produit le fichier JavaScript correspondant avec le même nom. Ici, nous devons nous assurer que notre fichier JavaScript d'origine qui sert d'entrée ne peut pas être dans le même répertoire afin que TypeScript ne les remplace pas.
Le processus de migration de JavaScript vers TypeScript comprend les étapes suivantes:
 1.Ajoutez le fichier tsconfig.json au projet 
Vous devez ajouter un fichier tsconfig.json au projet. TypeScript utilise un fichier tsconfig.json pour gérer les options de compilation du projet, telles que les fichiers que vous souhaitez inclure et exclure.
{'compilerOptions': {'outDir': './built', 'allowJs': true, 'target': 'es5'}, 'include': ['./src/**/*']}
 2. Intégrez avec un outil de construction 
La plupart des projets JavaScript ont un outil de construction intégré comme gulp ou webpack. Vous pouvez intégrer des projets avec webpack des manières suivantes:
Exécutez la commande suivante sur le terminal:
$ npm installer awesome-typescript-loader source-map-loader
Dans l'intégration Webpack, vous utilisez awesome-typescript-loader combiné avec source-map-loader pour un débogage plus facile du code source.
Deuxièmement, fusionnez la propriété module config dans notre fichier webpack.config.js pour inclure les chargeurs.
 3. Déplacez tous les fichiers .js vers des fichiers .ts 
Dans cette étape, vous devez renommer le fichier .js en fichier .ts. De même, si le fichier utilise JSX, vous devrez le renommer en .tsx. Maintenant, si nous ouvrons ce fichier dans un éditeur prenant en charge TypeScript, certains codes peuvent commencer à donner des erreurs de compilation. Ainsi, la conversion des fichiers un par un permet de gérer plus facilement les erreurs de compilation. Si TypeScript trouve des erreurs de compilation pendant la conversion, il est toujours capable de traduire le code.
 4. Recherchez les erreurs 
Après avoir déplacé le fichier js vers le fichier ts, TypeScript commencera immédiatement la vérification de type de notre code. Ainsi, vous pouvez obtenir des erreurs de diagnostic dans le code JavaScript.
 5. Utilisez des bibliothèques JavaScript tierces 
Les projets JavaScript utilisent des bibliothèques tierces telles que  ou Lodash. Pour compiler des fichiers, TypeScript a besoin de connaître les types de tous les objets de ces bibliothèques. Les fichiers de définition de type TypeScript pour les bibliothèques JavaScript sont déjà disponibles sur DefinitelyTyped. Il n'est donc pas nécessaire d'installer ce type en externe. Vous devez installer uniquement les types utilisés dans notre projet.
Pour jQuery, vous pouvez installer la définition:
$ npm install @ types / jquery
Après cela, apportez les modifications au projet JavaScript, exécutez l'outil de génération. Maintenant, vous devriez avoir le projet TypeScript compilé en JavaScript simple qui peut être exécuté dans le navigateur.
Avec cela, nous sommes arrivés à la fin de ce didacticiel TypeScript. J'espère que vous avez compris tous les éléments importants de TypeScript.
 Vérifiez     par Edureka.  La formation de certification en développement Web vous aidera à apprendre à créer des sites Web impressionnants à l'aide des API HTML5, CSS3, Twitter Bootstrap 3, jQuery et Google et à les déployer sur Amazon Simple Storage Service (S3). 
 Vous avez une question pour nous? Veuillez le mentionner dans la section commentaires de «Tutoriel TypeScript» et nous vous répondrons.