モジュール

内部モジュール

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

次に示すのは、内部モジュール宣言の書式です。

module モジュール名 {
    モジュール本体;
}

モジュール本体は変数、関数、クラス、インターフェイス等の宣言や文を含みます。 内部モジュール宣言は名前空間を表し、モジュール本体をカプセル化します。 次の例では、モジュール Foo の内側と外側の変数 x は別の変数として扱われます。

var x: string;
x = "JavaScript";

module Foo {
    var x: string;
    x = "TypeScript";
}

export 宣言

export 宣言を使用すると、モジュール本体で宣言されたメンバをモジュールの外に公開することができます。 公開したメンバへは「モジュール名.メンバ」形式でアクセスします。

module Foo {
    export var x: string;
    x = "TypeScript";
}

var x: string = Foo.x;

内部モジュール宣言はネストできます。

module Foo1 {
    export module Foo2 {
        export var x: string;
        x = "TypeScript";
    }
}

var x: string = Foo1.Foo2.x;

import 宣言

import 宣言を使用すると、モジュール内メンバの別名を作成することができます。

module Foo1 {
    export module Foo2 {
        export interface Foo3 {
            foo(): void;
        }
    }
}

// モジュール内で宣言されるインターフェイス Foo3 の別名として Foo を宣言する例
import Foo = Foo1.Foo2.Foo3;

// 別名 Foo を使用してクラス Bar を宣言する例
class Bar implements Foo {
    public foo(): void {
    }
}

マージ

同じ名前の内部モジュールを宣言した場合は、それぞれのメンバがマージされます。

module Foo {
    export var x: string = "Hello, ";
}

module Foo {
    export function y(message: string): string {
        return x + message;
    }
}

var result: string = Foo.y("TypeScript");  // "Hello, TypeScript"

ただし、同じ名前のメンバが含まれる場合はコンパイルエラーになります。

module Foo {
    export var x: string;
}

module Foo {
    // 型が異なるが、変数 x と同じ名前なのでコンパイルエラー
    export var x: number;
    
    // 関数だが、変数 x と同じ名前なのでコンパイルエラー
    export function x(): void {
        
    }
}

export 宣言されていないメンバはモジュールの外には非公開なので、同じ名前のメンバでもコンパイルエラーになりません。

module Foo {
    export var x: string;
}

module Foo {
    var x: string;
}

ファイル分割

/// <reference path="ソースファイルパス" /> 形式の特別なコメントを使用すると、 分割された TypeScript ソースファイルを参照できます。

// foo.ts
module Foo {
    export function bar(message: string): string {
        return "Hello, " + message;
    }
}
// main.ts
/// <reference path="foo.ts" />

var result: string = Foo.bar("TypeScript");

上記の例ではソースファイルを foo.ts と main.ts に分割します。 main.ts では /// <reference path="ソースファイルパス" /> 形式のコメントを使用して foo.ts のソースコードを参照します。

次のコマンドで main.ts をコンパイルすると、参照先の foo.ts も同時にコンパイルされます。

tsc main.ts

コンパイルが成功すると、foo.js と main.js が生成されます。 当然のことながら、HTML で使用する際は、main.js よりも( Foo が定義されている)foo.js を先に読み込む必要があります。

<!doctype html>
<html>
  <head>
    <script src="foo.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
  </body>
</html>