TypeScript-주변

앰비언트 선언은 실제 소스 코드가 다른 곳에 있음을 TypeScript 컴파일러에 알리는 방법입니다. 타사를 많이 소비 할 때jsjquery / angularjs / nodejs와 같은 라이브러리는 TypeScript에서 다시 작성할 수 없습니다. 이러한 라이브러리를 사용하는 동안 형식 안전성과 지능성을 보장하는 것은 TypeScript 프로그래머에게 어려울 것입니다. 앰비언트 선언은 다른js 라이브러리를 TypeScript로.

주변 환경 정의

앰비언트 선언은 규칙에 따라 다음 확장자 (d.ts)를 사용하여 유형 선언 파일에 보관됩니다.

Sample.d.ts

위 파일은 JavaScript로 트랜스 컴파일되지 않습니다. 형식 안전과 지능에 사용됩니다.

주변 변수 또는 모듈을 선언하는 구문은 다음과 같습니다.

통사론

declare module Module_Name {
}

주변 파일은 다음과 같이 클라이언트 TypeScript 파일에서 참조되어야합니다.

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

타이프 스크립트 프로그래머는이 라이브러리를 타이프 스크립트로 다시 작성할 시간이 없습니다. 그러나 여전히 형식 안전성과 함께 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

컴파일시 아래와 같은 자바 스크립트 코드 (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를 프로젝트에 통합 할 수 있습니다.