标签：
使用Visual Studio开发TypeScript项目时，开发人员可以将可重用的程序代码，封装为AMD Library来提供其他开发人员使用。本篇文章介绍如何将可重用的程序代码封装为AMD Library，主要为自己留个纪录，也希望能帮助到有需要的开发人员。(本篇文章使用TypeScript 1.8开始提供的功能，请先升级再进行后续开发步骤。)
首先开启Visual Studio来建立一个新项目：「myLibrary」，专案类型选择为：具有TypeScript的HTML应用程序，并且清除项目预先建立的内容档案。这个项目用来封装可重用的程序代码，提供其他开发人员使用。
建立项目
项目结构
接着在项目里，加入一个与项目同名的文件夹：「myLibrary」。并且在该文件夹内，加入提供其他开发人员使用的程序代码类别：「MyClass」。 (如果有更多共享类别，也是建置在myLibrary文件夹内。)
myLibrary\MyClass.ts
export class MyClass {
// methods
public getMessage(): string {
return "Clark";
}
}
项目结构
再来还需要在项目根目录下，建立一个与项目同名的ts檔：「myLibrary.ts」，用来汇出项目里的类别。(如果有更多共享类别，也是加入到myLibrary.ts里汇出。)
myLibrary.ts
// export
export * from "./myLibrary/myClass";
项目结构
完成类别建立之后，接着调整项目的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 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
<script>
require.config({
paths: {
"myLibrary": "lib/myLibrary"
}
});
</script>
执行app.ts
<!-- start -->
<script>
require(["app"]);
</script>
完整的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<!-- require -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>
<script>
require.config({
paths: {
"myLibrary": "lib/myLibrary"
}
});
</script>
<!-- start -->
<script>
require(["app"]);
</script>
</head>
<body>
<h1>TypeScript HTML App</h1>
<div id="content"></div>
</body>
</html>
接着在app.ts里面，加入下列程序来使用Library里面所封装的程序代码。(编写程序代码的时候，可以发现myLibrary支持IntelliSense提示。)
参考AMD Library
// reference
/// <reference path="./lib/myLibrary.d.ts" />
// import
import * as myLibrary from "myLibrary";
使用AMD Library中的程序代码
// test
var x = new myLibrary.MyClass();
var message = x.getMessage();
// alert
alert(message);
完整的app.ts
// reference
/// <reference path="./lib/myLibrary.d.ts" />
// import
import * as myLibrary from "myLibrary";
// test
var x = new myLibrary.MyClass();
var message = x.getMessage();
// alert
alert(message);
IntelliSense提示
最后，执行myApp。可以在执行画面上，看到一个Alert窗口显示从Library取得的讯息内容，这也就完成了使用Library的相关开发步骤。
显示回传讯息
范例程序代码：下载地址
标签：
原文地址：http://www.cnblogs.com/clark159/p/5430501.html
