TypeScript - สภาพแวดล้อม

การประกาศโดยรอบเป็นวิธีการบอกคอมไพลเลอร์ TypeScript ว่าซอร์สโค้ดจริงมีอยู่ที่อื่น เมื่อคุณบริโภคบุคคลที่สามจำนวนมากjsไลบรารีเช่น jquery / angularjs / nodejs คุณไม่สามารถเขียนซ้ำใน TypeScript ได้ การตรวจสอบความปลอดภัยของประเภทและความเข้มข้นในขณะที่ใช้ไลบรารีเหล่านี้จะเป็นสิ่งที่ท้าทายสำหรับโปรแกรมเมอร์ TypeScript การประกาศสภาพแวดล้อมช่วยให้ผสานรวมอื่น ๆ ได้อย่างราบรื่นjs ไลบรารีลงใน TypeScript

การกำหนดบรรยากาศ

การประกาศสภาพแวดล้อมเป็นไปตามแบบแผนเก็บไว้ในไฟล์การประกาศประเภทที่มีนามสกุลต่อไปนี้ (d.ts)

Sample.d.ts

ไฟล์ด้านบนจะไม่ถูกแปลงเป็น JavaScript จะถูกใช้เพื่อความปลอดภัยประเภทและ intellisense

ไวยากรณ์สำหรับการประกาศตัวแปรแวดล้อมหรือโมดูลจะเป็นดังต่อไปนี้ -

ไวยากรณ์

declare module Module_Name {
}

ไฟล์โดยรอบควรอ้างอิงในไฟล์ TypeScript ของไคลเอ็นต์ดังที่แสดง -

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

ตัวอย่าง

มาทำความเข้าใจกันด้วยตัวอย่างความช่วยเหลือ สมมติว่าคุณได้รับไลบรารี javascript ของบุคคลที่สามซึ่งมีรหัสคล้ายกับสิ่งนี้

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 คุณจะไม่มีเวลาเขียนไลบรารีนี้ใหม่เป็น typescript แต่คุณยังต้องใช้วิธี doSum () ด้วยความปลอดภัยของประเภท สิ่งที่คุณทำได้คือไฟล์การประกาศโดยรอบ ให้เราสร้างไฟล์การประกาศโดยรอบ Calc.d.ts

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

ไฟล์แอมเบียนท์จะไม่มีการใช้งานเป็นเพียงการประกาศประเภท ตอนนี้การประกาศจะต้องรวมอยู่ในไฟล์ typescript ดังนี้

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

โค้ดบรรทัดต่อไปนี้จะแสดงข้อผิดพลาดของคอมไพเลอร์ เนื่องจากในไฟล์ประกาศเราระบุพารามิเตอร์อินพุตจะเป็นตัวเลข

obj.doSum("Hello");

แสดงความคิดเห็นในบรรทัดด้านบนและรวบรวมโปรแกรมโดยใช้ไวยากรณ์ต่อไปนี้ -

tsc CalcTest.ts

ในการคอมไพล์จะสร้างโค้ด JavaScript (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));

ในการรันโค้ดให้เราเพิ่มหน้า html ที่มีแท็กสคริปต์ตามที่ระบุด้านล่าง เพิ่มไฟล์ CalcTest.js ที่คอมไพล์แล้วและไฟล์ไลบรารีของบุคคลที่สาม 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>

จะแสดงหน้าต่อไปนี้ -

บนคอนโซลคุณสามารถดูผลลัพธ์ต่อไปนี้ -

ในทำนองเดียวกันคุณสามารถรวม jquery.d.ts หรือ angular.d.ts เข้ากับโปรเจ็กต์ได้ตามความต้องการของคุณ