Typescript-modules

提供：Dev Guides
2020年6月22日 (月) 23:32時点におけるMaintenance script (トーク | 投稿記録)による版 (Imported from text file)
(差分) ← 古い版 | 最新版 (差分) | 新しい版 → (差分)
移動先:案内、検索

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)
「https://www.finddevguides.com/index.php?title=Typescript-modules&oldid=14730」から取得
Powered by MediaWiki