[TypeScript] 建立与使用AMD Library

前言

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

前言01

建立

首先开启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的相关开发步骤。

显示回传讯息

范例下载

范例程序代码：下载地址