[TypeScript] 建立与使用AMD Library
前言
使用Visual Studio开发TypeScript项目时，开发人员可以将可重用的程序代码，封装为AMD Library来提供其他开发人员使用。本篇文章介绍如何将可重用的程序代码封装为AMD Library，主要为自己留个纪录，也希望能帮助到有需要的开发人员。(本篇文章使用TypeScript 1.8开始提供的功能，请先升级再进行后续开发步骤。)
建立
首先开启Visual Studio来建立一个新项目：「myLibrary」，专案类型选择为：具有TypeScript的HTML应用程序，并且清除项目预先建立的内容档案。这个项目用来封装可重用的程序代码，提供其他开发人员使用。
-
建立项目
-
项目结构
接着在项目里，加入一个与项目同名的文件夹：「myLibrary」。并且在该文件夹内，加入提供其他开发人员使用的程序代码类别：「MyClass」。 (如果有更多共享类别，也是建置在myLibrary文件夹内。)
-
myLibraryMyClass.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的相关开发步骤。
-
显示回传讯息
范例下载
范例程序代码：下载地址