Ambient ها در زبان برنامه نویسی TypeScript – آموزش TypeScript

دوشنبه ۲۹ دی ۱۳۹۹
بازدید ۷۴۷ نفر
سعید سیفی زاده
(10 امتیاز از 2 رای)
Loading...

تصویر typescript-ambients_7266 Ambient ها در زبان برنامه نویسی TypeScript - آموزش TypeScript

Ambient ها در زبان برنامه نویسی TypeScript

با استفاده از Ambient ها می توانیم به کامپایلر تایپ اسکریپت بگویم که سورس واقعی در جای دیگر قرار دارد. استفاده از Ambient ها به یکپارچه سازی سایر کتابخانه های js استفاده شده در TypeScript کمک می کند.

تعریف Ambient ها

بر طبق قرار داد، فایل هایی که شامل Ambient ها هستند، با پسوند زیر مشخص می شوند:

Sample.d.ts

1	Sample.d.ts

فایل هایی که با این پسوند باشند، به جاوا اسکریپت کامپایل نمی شوند و فقط برای حفظ امینت نوع داده ها (typesafety) و intellisense استفاده می شوند. در زیر می توانید سینتکس مربوط به اعلان متغیرهای Ambient یا ماژول ها را مشاهده کنید:

declare module Module_Name {
}

1 2	declare module Module_Name { }

فایل های Ambient باید در فایل کلاینت TypeScript به صورت Reference مشخص شوند:

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

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

مثال:

فرض کنید شما یک کتابخانه شخص ثالث جاوا اسکریپت با کد زیر دارید:

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

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

}

به عنوان یک برنامه نویس TypeScript زمان کافی برای نوشتن این کتابخانه با تایپ اسکریپت را ندارید. اما لازم است تا از متد doSum() را با typesafety استفاده کنید. در اینگونه مواقع می توانیم از Ambient ها استفاده کنیم. یک فایل Ambient با نام Calc.d.ts مانند نمونه زیر ایجاد کنید:

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

FileName: Calc.d.ts

declare module TutorialPoint {

export class Calc {

doSum(limit:number) : number;

}

توجه داشته باشید که فایل Ambient شامل پیاده‌سازی موارد اعلان شده نیستند. حال باید اعلان فوق را در فایل TypeScript مورد نظر وارد کنیم:

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

FileName : CalcTest.ts

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

var obj = new TutorialPoint.Calc();

obj.doSum("Hello"); // compiler error

console.log(obj.doSum(10));

در کد فوق کد زیر، باعث تولید خطای کامپایلر خواهد شد. زیرا ما در اعلان این تابع نوع پارامتر ورودی را به صورت number مشخص کرده ایم.

obj.doSum("Hello");

1	obj.doSum("Hello");

خط بالا را کامنت کنید و برنامه را با دستور زیر کامپایل کنید:

tsc CalcTest.ts

1	tsc CalcTest.ts

خروجی کامپایل شده فایل 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));

//Generated by typescript 1.8.10

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

var obj = new TutorialPoint.Calc();

// obj.doSum("Hello");

console.log(obj.doSum(10));

برای اجرای کد فوق، یک صفحه HTML با تگ ها script مانند نمونه زیر اضافه کنیم.

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

<html>