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 = {}));外部モジュール
TypeScriptの外部モジュールは、複数の外部間の依存関係を指定してロードするために存在します jsファイル。1つしかない場合jsファイルが使用されている場合、外部モジュールは関係ありません。従来、JavaScriptファイル間の依存関係の管理は、ブラウザーのスクリプトタグ（<script> </ script>）を使用して行われました。ただし、モジュールのロード中は非常に線形であるため、拡張可能ではありません。つまり、ファイルを次々にロードする代わりに、モジュールをロードする非同期オプションはありません。NodeJなどのサーバー用にjsをプログラミングしている場合、スクリプトタグすらありません。
扶養家族をロードするための2つのシナリオがあります js 単一のメインJavaScriptファイルからのファイル。
- クライアント側-RequireJs
- サーバーサイド-NodeJ
モジュールローダーの選択
外部JavaScriptファイルのロードをサポートするには、モジュールローダーが必要です。これは別のものになりますjs図書館。ブラウザの場合、使用される最も一般的なライブラリはRequieJSです。これは、AMD（非同期モジュール定義）仕様の実装です。AMDは、ファイルを次々にロードする代わりに、相互に依存している場合でも、すべてを個別にロードできます。
外部モジュールの定義
CommonJSまたはAMDを対象とするTypeScriptで外部モジュールを定義する場合、各ファイルはモジュールと見なされます。したがって、外部モジュールで内部モジュールを使用することはオプションです。
TypeScriptをAMDからCommonJsモジュールシステムに移行する場合、追加の作業は必要ありません。変更する必要があるのはコンパイラフラグだけです。JavaScriptとは異なり、CommonJから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());
});メインのTypeScriptファイルをコンパイルするコマンド Commonjs システムは
tsc --module commonjs TestShape.tsコンパイル時に、次のJavaScriptコードが生成されます。 Commonjs。
ファイル：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)