モジュール

外部モジュール

このエントリーをはてなブックマークに追加
最終更新日 2016-12-31

TypeScript は、CommonJS 形式や AMD( Asynchronous Module Definition )形式のモジュールをサポートします。 TypeScript ではこれらを総称して外部モジュールと呼びます。次に示すのは外部モジュールを使用する例です。

まず、モジュールとして参照される側のファイルの例です。

// module1.ts

// 変数のエクスポート
export var fooVariable: string = "TypeScript";

// 関数のエクスポート
export function fooFunction(): string {
    return "TypeScript";
}

// クラスのエクスポート
export class FooClass {
    public bar(): string {
        return "TypeScript";
    }
}

// インターフェイスのエクスポート
export interface FooInterface {
    bar(): string;
}

// モジュールのエクスポート
export module FooModule {
    export var bar: string = "TypeScript";
}

トップレベルで export 宣言を使用すると、他のファイルから参照できるようになります。

次に、モジュールを参照する側のファイルの例です。

// main.ts

import m1 = require("./module1");

var v = m1.fooVariable;

var f = m1.fooFunction();

var c = new m1.FooClass;

class Foo implements m1.FooInterface {
    public bar(): string {
        return "TypeScript";
    }
}

var m = m1.FooModule.bar;

外部モジュールを参照するためには require() を呼び出します。 上記の例では、module1.ts でエクスポートされたコードを m1 を使用して呼び出すことができます。

なお、外部モジュールをコンパイルするためにはコンパイラオプション -m または --module を使用します。

CommonJS

Node.js で外部モジュールを使用する場合は CommonJS 形式でコンパイルします。

tsc -m commonjs main.ts

コンパイルが成功すると、次のコマンドで実行できます。

node main.js

AMD

Web ブラウザで外部モジュールを使用する場合は AMD 形式でコンパイルします。

tsc -m amd main.ts

コンパイルが成功すると、RequireJS のようなライブラリを利用して実行できます。

<!doctype html>
<html>
  <head>
    <script data-main="main" src="require.js"></script>
  </head>
  <body>
  </body>
</html>

export 代入

外部モジュールの export 宣言では、export 代入という書式も利用できます。 次に示すのは export 代入でクラスをエクスポートする例です。

// module2.ts

// クラスのエクスポート
export = FooClass;

class FooClass {
    public bar(): string {
        return "TypeScript";
    }
}
// main.ts

import Foo = require("./module2");

var c = new Foo;

main.ts の Foo は、エクスポートされたクラスを表します。なお、export 代入は 1 ファイルにつき 1 つしか使用できません。