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)