Typescript-modules
TypeScript-モジュール
モジュールは、TypeScriptで記述されたコードを整理するという考え方で設計されています。 モジュールは大きく分けて-
- 内部モジュール
- 外部モジュール
内部モジュール
内部モジュールは、Typescriptの以前のバージョンに含まれていました。 これは、クラス、インターフェイス、機能を1つのユニットに論理的にグループ化するために使用され、別のモジュールでエクスポートできます。 この論理グループは、TypeScriptの最新バージョンでは名前空間と呼ばれます。 したがって、内部モジュールは廃止され、代わりに名前空間を使用できます。 内部モジュールは引き続きサポートされますが、内部モジュールよりも名前空間を使用することをお勧めします。
内部モジュール構文(旧)
module TutorialPoint {
export function add(x, y) {
console.log(x+y);
}
}
名前空間の構文(新規)
namespace TutorialPoint {
export function add(x, y) { console.log(x + y);}
}
両方の場合に生成されるJavaScriptは同じです
var TutorialPoint;
(function (TutorialPoint) {
function add(x, y) {
console.log(x + y);
}
TutorialPoint.add = add;
})(TutorialPoint || (TutorialPoint = {}));
外部モジュール
複数の外部 js ファイル間の依存関係を指定およびロードするために、TypeScriptの外部モジュールが存在します。 js ファイルが1つしか使用されていない場合、外部モジュールは関係ありません。 従来、JavaScriptファイル間の依存関係の管理は、ブラウザーのスクリプトタグ(<script> </script>)を使用して行われていました。 しかし、モジュールをロードしている間は非常に線形であるため、これは拡張できません。 これは、ファイルを次々にロードする代わりに、モジュールをロードする非同期オプションがないことを意味します。 たとえばNodeJなどのサーバー用にjsをプログラミングしている場合、スクリプトタグさえありません。
単一のメインJavaScriptファイルから依存 js ファイルをロードするには、2つのシナリオがあります。
- クライアント側-RequireJs
- サーバー側-NodeJ
モジュールローダーの選択
外部JavaScriptファイルのロードをサポートするには、モジュールローダーが必要です。 これは別の js ライブラリになります。 ブラウザーで使用される最も一般的なライブラリーはRequieJSです。 これは、AMD(非同期モジュール定義)仕様の実装です。 AMDは、ファイルを次々にロードする代わりに、相互に依存している場合でも、それらをすべて個別にロードできます。
外部モジュールの定義
CommonJSまたはAMDを対象とするTypeScriptで外部モジュールを定義する場合、各ファイルはモジュールと見なされます。 したがって、内部モジュールと外部モジュールを併用することはオプションです。
TypeScriptをAMDからCommonJsモジュールシステムに移行する場合、追加の作業は必要ありません。 変更する必要があるのはコンパイラフラグだけです。JavaScriptとは異なり、CommonJsからAMD、またはその逆への移行にはオーバーヘッドがあります。
外部モジュールを宣言するための構文は、キーワード「export」と「import」を使用しています。
構文
//FileName : SomeInterface.ts
export interface SomeInterface {
//code declarations
}
宣言されたモジュールを別のファイルで使用するには、次のようにimportキーワードが使用されます。 ファイル名は拡張子を使用せずに指定するだけです。
import someInterfaceRef = require(“./SomeInterface”);
例
例を使用してこれを理解しましょう。
//IShape.ts
export interface IShape {
draw();
}
//Circle.ts
import shape = require("./IShape");
export class Circle implements shape.IShape {
public draw() {
console.log("Cirlce is drawn (external module)");
}
}
//Triangle.ts
import shape = require("./IShape");
export class Triangle implements shape.IShape {
public draw() {
console.log("Triangle is drawn (external module)");
}
}
//TestShape.ts
import shape = require("./IShape");
import circle = require("./Circle");
import triangle = require("./Triangle");
function drawAllShapes(shapeToDraw: shape.IShape) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
AMDシステム用のメインTypeScriptファイルをコンパイルするコマンドは次のとおりです-
tsc --module amd TestShape.ts
コンパイル時に、AMD用の次のJavaScriptコードが生成されます。
ファイル:IShape.js
//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
});
ファイル:Circle.js
//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
var Circle = (function () {
function Circle() {
}
Circle.prototype.draw = function () {
console.log("Cirlce is drawn (external module)");
};
return Circle;
})();
exports.Circle = Circle;
});
ファイル:Triangle.js
//Generated by typescript 1.8.10
define(["require", "exports"], function (require, exports) {
var Triangle = (function () {
function Triangle() {
}
Triangle.prototype.draw = function () {
console.log("Triangle is drawn (external module)");
};
return Triangle;
})();
exports.Triangle = Triangle;
});
ファイル:TestShape.js
//Generated by typescript 1.8.10
define(["require", "exports", "./Circle", "./Triangle"],
function (require, exports, circle, triangle) {
function drawAllShapes(shapeToDraw) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
});
*Commonjs* システム用のメインTypeScriptファイルをコンパイルするコマンドは
tsc --module commonjs TestShape.ts
コンパイル時に、 Commonjs 用の次のJavaScriptコードが生成されます。
ファイル:Circle.js
//Generated by typescript 1.8.10
var Circle = (function () {
function Circle() {
}
Circle.prototype.draw = function () {
console.log("Cirlce is drawn");
};
return Circle;
})();
exports.Circle = Circle;
ファイル:Triangle.js
//Generated by typescript 1.8.10
var Triangle = (function () {
function Triangle() {
}
Triangle.prototype.draw = function () {
console.log("Triangle is drawn (external module)");
};
return Triangle;
})();
exports.Triangle = Triangle;
ファイル:TestShape.js
//Generated by typescript 1.8.10
var circle = require("./Circle");
var triangle = require("./Triangle");
function drawAllShapes(shapeToDraw) {
shapeToDraw.draw();
}
drawAllShapes(new circle.Circle());
drawAllShapes(new triangle.Triangle());
出力
Cirlce is drawn (external module)
Triangle is drawn (external module)