吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【TypeScript】モジュールについて

2014年10月12日 / category : typescript

module(モジュール)の仕組みについて、まとめてみます。

私自身、TypeScriptでmoduleを使った経験がないので、どういう使い方が有効的なのか判断できませんが、
moduleを使うことで、他のコードなどから独立させることができそうです。
コードが複雑になる案件などでは良いかもしれません。

TypeScript
module Test{}

モジュール名 + {}
とします。
このモジュールの中に一連のコードを記述していきます。
例えば、クラスを生成してみましょう。

TypeScript
module Test{
	class MainPlan{
		public name:string = 'PlanA';
	}
	var plan:MainPlan = new MainPlan();
	console.log( plan.name );
}

Testモジュールの中に、MainPlanというクラスを生成しました。
さらに、インスタンスを生成し、nameプロパティを参照しています。

‘PlanA’
が出力されました。問題ないですね。

それではモジュールの外で生成する場合はどうなるでしょうか。

TypeScript
module Test{
	export class MainPlan{
		public name:string = 'PlanA';
	}
}

var plan:Test.MainPlan = new Test.MainPlan();
console.log( plan.name );

‘PlanA’
が出力されました。問題ないですね。

ただ、前のコードと異なる点がいくつかあります。
まず、インスタンスを生成するときのクラスまでのパスがTest.MainPlanとなっています。
これは、モジュールの外からの参照のため、

モジュール名.クラス名

となります。

また、クラス名の前にexportが追加されました。
通常はモジュールの外からのアクセスができなくなっています。それを許可するために、exportが必要になります。

TypeScript
module ModuleA{
	export module ModuleB{
		export class A{
			public name:string = 'class A';
		}
	}
}

var a:ModuleA.ModuleB.A = new ModuleA.ModuleB.A();
console.log( a.name );

上のコードのように、moduleを入れ子にすることもできます。

TypeScript
module ModuleA.ModuleB{
	export class A{
		public name:string = 'class A';
	}
}

var a:ModuleA.ModuleB.A = new ModuleA.ModuleB.A();
console.log( a.name );

上のコードのように、モジュール名をドット(.)で繋ぐこともできます。

ModuleA.ModuleB.A
なんか、長くていちいち指定するの大変ですよね・・・、有ります、便利なものが。

TypeScript
module ModuleA.ModuleB{
	export class A{
		public name:string = 'class A';
	}
}

import A = ModuleA.ModuleB.A;
var a:A = new A();
console.log( a.name );

importを使用することで、参照を簡単にすることができます。