What are ambients in typescript explain with example?

4 years ago
Afaq Arif
2,165 Views
2

In this chapter, we will discuss ambient in TypeScript with examples. We will also learn how to declare ambient in TypeScript.

Ambient declarations are used to tell the TypeScript compiler that the actual source code is elsewhere. You can’t edit it in TypeScript while using third-party group js libraries like jquery/angularjs/nodejs. It will be a real challenge for a TypeScript programmer to secure type-safety and IntelliSense while using these libraries. Ambient declarations help to smoothly mix other js libraries into TypeScript.

Defining Ambients

Ambient declarations are by convention kept in a type declaration file with following extension (d.ts)

Sample.d.ts

The above file will not be transcompiled to JavaScript. It will be used for type safety and intelliSense.

The syntax for declaring ambient variables or modules is as follows.

Syntax

declare module Module_Name {
}

The ambient files should be referenced in the client TypeScript file as shown.

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

Example

Let’s understand this with help of an example. Suppose you have been given a third-party javascript library that contains code similar to this.

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();
            }
         }
      }
   }
}

You should not rewrite this library to TypeScript if you are a TypeScript programmer. But you still need to use the doSum() order with type safety. What you could do is an ambient declaration file. Let us create an ambient declaration file Calc.d.ts

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

Ambient files will not have any implementations as it is just type declarations. We can include declarations now in the typescript file as follows.

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

The following line of code runs a compiler error. This is because the input parameter is a number mention in the declaration file by us.

obj.doSum("Hello");

Comment the above line and compile the program using the following syntax.

tsc CalcTest.ts

On composing, it runs following JavaScript code(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));

We need to add an HTML page with script tags as given below for code running. Now add the compiled CalcTest.js file and the third-party library file 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>

It will display the following page.