ajax的typeAMDAt,[TypeScript] 创建与使用AMD Library

[TypeScript] 创建与使用AMD Library

前言

使用Visual Studio开发TypeScript项目时，开发人员能够将可重用的程序代码，封装为AMD Library来提供其余开发人员使用。本篇文章介绍如何将可重用的程序代码封装为AMD Library，主要为本身留个纪录，也但愿能帮助到有须要的开发人员。(本篇文章使用TypeScript 1.8开始提供的功能，请先升级再进行后续开发步骤。)css

创建

首先开启Visual Studio来创建一个新项目：「myLibrary」，专案类型选择为：具备TypeScript的HTML应用程序，而且清除项目预先创建的内容档案。这个项目用来封装可重用的程序代码，提供其余开发人员使用。html

创建项目git

项目结构github

接着在项目里，加入一个与项目同名的文件夹：「myLibrary」。而且在该文件夹内，加入提供其余开发人员使用的程序代码类别：「MyClass」。 (若是有更多共享类别，也是建置在myLibrary文件夹内。)ajax

myLibrary\MyClass.tsapp export class MyClass {

// methods

public getMessage(): string {

return "Clark";

}

}

项目结构post

再来还须要在项目根目录下，创建一个与项目同名的ts檔：「myLibrary.ts」，用来汇出项目里的类别。(若是有更多共享类别，也是加入到myLibrary.ts里汇出。)ui

myLibrary.ts3d // export

export * from "./myLibrary/myClass";

项目结构code

完成类别创建以后，接着调整项目的TypeScript建置设定。将项目设定为，在建置时：编译为AMD模块、输出单一档案、而且产生宣告档案。

TypeScript建置设定

完成设定步骤后，存盘而且编译项目，就能够在项目的bin目录下取得编译完成的AMD Library内容档：myLibrary.d.ts、myLibrary.js、myLibrary.js.map。

产出AMD Library

使用

接着开启Visual Studio来创建一个新项目：「myApp」，这个项目用来讲明，如何使用封装为AMD Library的程序代码。

创建项目

项目结构

创建项目以后，接着调整项目的TypeScript建置设定。将项目设定为，在建置时：编译为AMD模块。

TypeScript建置设定

完成项目设定以后，加入一个「lib」文件夹。而且把myLibrary项目所产出的AMD Library的三个档案，加入到这个lib文件夹中。

加入AMD Library

加入AMD Library以后，接着在项目预设的index.html里面，加入下列程序代码，使用RequireJS挂载AMD Library，而且执行预设的app.ts内容。

挂载AMD Library

require.config({

paths: {

"myLibrary": "lib/myLibrary"

}

});

执行app.ts

require(["app"]);

完整的index.html

TypeScript HTML App

require.config({

paths: {

"myLibrary": "lib/myLibrary"

}

});

require(["app"]);

TypeScript HTML App

接着在app.ts里面，加入下列程序来使用Library里面所封装的程序代码。(编写程序代码的时候，能够发现myLibrary支持IntelliSense提示。)

参考AMD Library // reference

///

// import

import * as myLibrary from "myLibrary";

使用AMD Library中的程序代码 // test

var x = new myLibrary.MyClass();

var message = x.getMessage();

// alert

alert(message);

完整的app.ts // reference

///

// import

import * as myLibrary from "myLibrary";

// test

var x = new myLibrary.MyClass();

var message = x.getMessage();

// alert

alert(message);

IntelliSense提示

最后，执行myApp。能够在执行画面上，看到一个Alert窗口显示从Library取得的讯息内容，这也就完成了使用Library的相关开发步骤。

显示回传讯息

范例下载

范例程序代码：下载地址