开发手册 欢迎您!
软件开发者资料库

TypeScript - 环境

TypeScript Ambients - 从简单和简单的步骤学习TypeScript,从基本到高级概念,包括概述,环境设置,基本语法,类型,变量,运算符,决策,循环,函数,数字,字符串,数组,元组,联盟,接口,类,对象,命名空间,模块,环境。

Ambient声明是一种告诉TypeScript编译器实际源代码存在于其他位置的方法.当您使用一堆第三方 js 库(如jquery/angularjs/nodejs)时,您无法在TypeScript中重写它.使用这些库时确保类型安全和智能感知对于TypeScript程序员来说将是一项挑战.环境声明有助于将其他 js 库无缝集成到TypeScript中.

定义环境

环境声明按惯例保存在具有以下扩展名的类型声明文件(d.ts)

  Sample.d.ts

以上文件不会被反编译为JavaScript.它将用于类型安全和智能感知.

声明环境变量或模块的语法如下:<

语法

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

作为打字员程序员,你没有时间把这个库重写为打字稿.但是你仍然需要使用类型安全的doSum()方法.你可以做的是环境声明n档.让我们创建一个环境声明文件Calc.d.ts

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

环境文件不包含实现,它只是类型声明.声明现在需要包含在typescript文件中,如下所示.

FileName : CalcTest.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/// var obj = new TutorialPoint.Calc();// obj.doSum("Hello");console.log(obj.doSum(10));

为了执行代码,让我们添加一个带有脚本标签的html页面,如下所示.添加已编译的CalcTest.js文件和第三方库文件CalcThirdPartyJsLib.js.

           

Ambient Test

       

Calc Test

                

它将显示以下页面 :

Ambient Declarations

在控制台上,您可以看到以下输出 :

  55

同样,您可以根据需要将jquery.d.ts或angular.d.ts集成到项目中.