TypeScript - Môi trường xung quanh

Khai báo môi trường xung quanh là một cách để nói với trình biên dịch TypeScript rằng mã nguồn thực sự tồn tại ở nơi khác. Khi bạn đang sử dụng một loạt các bên thứ bajscác thư viện như jquery / anglejs / nodejs bạn không thể viết lại nó trong TypeScript. Đảm bảo an toàn kiểu chữ và nội dung trong khi sử dụng các thư viện này sẽ là một thách thức đối với một lập trình viên TypeScript. Khai báo môi trường xung quanh giúp tích hợp liền mạch cácjs thư viện vào TypeScript.

Xác định môi trường xung quanh

Khai báo môi trường xung quanh theo quy ước được lưu giữ trong tệp khai báo kiểu có phần mở rộng sau (d.ts)

Sample.d.ts

Tệp trên sẽ không được biên dịch sang JavaScript. Nó sẽ được sử dụng cho an toàn kiểu và intellisense.

Cú pháp để khai báo các biến hoặc mô-đun xung quanh sẽ như sau:

Cú pháp

declare module Module_Name {
}

Các tệp môi trường xung quanh phải được tham chiếu trong tệp TypeScript của máy khách như được minh họa -

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

Thí dụ

Hãy hiểu điều này với sự trợ giúp của một ví dụ. Giả sử bạn đã được cung cấp một thư viện javascript của bên thứ ba chứa mã tương tự như thế này.

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

Là một lập trình viên typecript, bạn sẽ không có thời gian để viết lại thư viện này thành typecript. Nhưng bạn vẫn cần sử dụng phương thức doSum () với kiểu an toàn. Những gì bạn có thể làm là tập tin khai báo xung quanh. Hãy để chúng tôi tạo tệp khai báo môi trường xung quanh Calc.d.ts

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

Các tệp môi trường sẽ không chứa các triển khai, nó chỉ là các khai báo kiểu. Các khai báo bây giờ cần được đưa vào tệp biên bản như sau.

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

Dòng mã sau sẽ hiển thị lỗi trình biên dịch. Điều này là do trong tệp khai báo, chúng tôi đã chỉ định tham số đầu vào sẽ là số.

obj.doSum("Hello");

Comment dòng trên và biên dịch chương trình theo cú pháp sau:

tsc CalcTest.ts

Khi biên dịch, nó sẽ tạo mã JavaScript sau (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));

Để thực thi mã, chúng ta hãy thêm một trang html với các thẻ script như dưới đây. Thêm tệp CalcTest.js đã biên dịch và tệp thư viện bên thứ ba 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>

Nó sẽ hiển thị trang sau:

Trên bảng điều khiển, bạn có thể thấy kết quả sau:

Tương tự, bạn có thể tích hợp jquery.d.ts hoặc angle.d.ts vào một dự án, dựa trên yêu cầu của bạn.