TypeScript - Ambients

Les déclarations ambiantes sont un moyen d'indiquer au compilateur TypeScript que le code source réel existe ailleurs. Lorsque vous consommez un groupe de tiersjsdes bibliothèques comme jquery / angularjs / nodejs vous ne pouvez pas le réécrire dans TypeScript. Assurer la sécurité des types et l'intellisense lors de l'utilisation de ces bibliothèques sera un défi pour un programmeur TypeScript. Les déclarations ambiantes aident à intégrer de manière transparente d'autresjs bibliothèques dans TypeScript.

Définition des ambiances

Les déclarations ambiantes sont par convention conservées dans un fichier de déclaration de type avec l'extension suivante (d.ts)

Sample.d.ts

Le fichier ci-dessus ne sera pas transcompilé en JavaScript. Il sera utilisé pour la sécurité de type et l'intellisense.

La syntaxe pour déclarer les variables ou modules ambiants sera la suivante -

Syntaxe

declare module Module_Name {
}

Les fichiers ambiants doivent être référencés dans le fichier TypeScript client comme indiqué -

/// <reference path = " Sample.d.ts" />

Exemple

Comprenons cela à l'aide d'un exemple. Supposons que vous ayez reçu une bibliothèque javascript tierce contenant un code similaire à celui-ci.

FileName: CalcThirdPartyJsLib.js 
var TutorialPoint;  
(function (TutorialPoint) {  
   var Calc = (function () { 
      function Calc() { 
      } 
      Calc.prototype.doSum = function (limit) {
         var sum = 0; 
         
         for (var i = 0; i <= limit; i++) { 
            Calc.prototype.doSum = function (limit) {
               var sum = 0; 
               
               for (var i = 0; i <= limit; i++) { 
                  sum = sum + i; 
                  return sum; 
                  return Calc; 
                  TutorialPoint.Calc = Calc; 
               })(TutorialPoint || (TutorialPoint = {})); 
               var test = new TutorialPoint.Calc();
            }
         }
      }
   }
}

En tant que programmeur dactylographié, vous n'aurez pas le temps de réécrire cette bibliothèque en tapuscrit. Mais vous devez toujours utiliser la méthode doSum () avec la sécurité de type. Ce que vous pouvez faire est un fichier de déclaration ambiante. Créons un fichier de déclaration ambiante Calc.d.ts

FileName: Calc.d.ts 
declare module TutorialPoint { 
   export class Calc { 
      doSum(limit:number) : number; 
   }
}

Les fichiers ambiants ne contiendront pas les implémentations, ce sont juste des déclarations de type. Les déclarations doivent maintenant être incluses dans le fichier dactylographié comme suit.

FileName : CalcTest.ts  
/// <reference path = "Calc.d.ts" /> 
var obj = new TutorialPoint.Calc(); 
obj.doSum("Hello"); // compiler error 
console.log(obj.doSum(10));

La ligne de code suivante affichera une erreur du compilateur. En effet, dans le fichier de déclaration, nous avons spécifié le paramètre d'entrée sera nombre.

obj.doSum("Hello");

Commentez la ligne ci-dessus et compilez le programme en utilisant la syntaxe suivante -

tsc CalcTest.ts

Lors de la compilation, il générera le code JavaScript suivant (CalcTest.js).

//Generated by typescript 1.8.10
/// <reference path = "Calc.d.ts" />
var obj = new TutorialPoint.Calc();

// obj.doSum("Hello");
console.log(obj.doSum(10));

Afin d'exécuter le code, ajoutons une page html avec des balises de script comme indiqué ci-dessous. Ajoutez le fichier CalcTest.js compilé et le fichier de bibliothèque tiers CalcThirdPartyJsLib.js.

<html> 
   <body style = "font-size:30px;"> 
      <h1>Ambient Test</h1> 
      <h2>Calc Test</h2> 
   </body> 
   
   <script src = "CalcThirdPartyJsLib.js"></script> 
   <script src = "CalcTest.js"></script> 
</html>

Il affichera la page suivante -

Sur la console, vous pouvez voir la sortie suivante -

55

De même, vous pouvez intégrer jquery.d.ts ou angular.d.ts dans un projet, en fonction de vos besoins.