WEB WEBフロントエンド開発

TypeScriptのモジュールについて

投稿日:2017年11月13日 更新日:

モジュールについてまとめました。

(内部モジュール)

共通の関数などをグローバル空間に記載したくない場合などに使用する。

 

(外部モジュール)
  • 別ファイルとして外部にある機能を利用する仕組です。内部モジュールと違い、moduleキーワードは必要なく、exprotキーワード使用することで外部から機能を利用できるようになります。
  • 外部モジュールは機能を複数のファイルに分割し、それぞれをモジュールとして参照する仕組みの事。JavaScriptにはこの仕組みがないため、CommonJSというAPI仕様が策定され、それをサポートする環境(Node.js)で使われるようになった。
  • ブラウザでモジュールが動作する仕組みはAMDという別の仕様に切り離されている。WebPackやBrowserfyなどを使ってブラウザが解釈可能なJavaScriptに変換するか、RequireJSを使って実行時に変換する方法がある。

 

 

 

1.外部モジュールについて

  • トップレベルで export 宣言を使用すると、他のファイルから参照できるようになります。
  • TypeScript は、ES6 形式、CommonJS 形式、 AMD形式のモジュールをサポートします。
  • 外部モジュールをコンパイルするためにはコンパイラオプション -m または --module を使用します。

 

ES6 module 形式

TypeScriptがサポートするES6 moduleの書き方

 

CommonJS 形式

Node.js で外部モジュールを使用する場合は CommonJS 形式でコンパイルします。

export/import/requireで参照を定義します。

コンパイル

コンパイルが成功すると、次のコマンドで実行できます。

 

AMD 形式

Web ブラウザで外部モジュールを使用する場合は AMD 形式でコンパイルします。

export/import/requireで参照を定義します。

コンパイル

コンパイルが成功すると、WebPackやBrowserfyなどを使ってブラウザが解釈可能なJavaScriptに変換するか、RequireJS のようなライブラリを利用して実行できます。

 

型定義ファイルによるImport

  • TypeScript のソースは TypeScript のモジュールしか読み込まない。
  • 型定義ファイルを使って、JavaScript のモジュールを読み込むことが可能
  • 型定義ファイルは、既存の JavaScript モジュールに対しても型チェックをするために、型宣言だけを TypeScript で書いたファイル。
  • .d.ts という拡張子のファイルです。
  • TDefinitelyTyped というサイトには、世の中の多くの JavaScript ライブラリに対する型定義ファイルが集められています。

 

型定義ファイルの配布

  • TypeScript でモジュールを書いて、コンパイルする時に tsconfig.json の declarations を true にしておくと、自動的に .d.ts ファイルが作られます。
  • TypeScript で書いたモジュールを npm を通じて配布する場合は、この型定義ファイルを配布物に含めます。その際、package.json の typings エントリーにその名前を書くか、もしくは、"index.d.ts" という名前にしておくと、インポートする側の TypeScript コンパイラーが自動的に読み込んでくれます。
  • typings エントリーは、1 つしかファイル名を書くことが出来ないので、1 つの npm パッケージに複数のモジュールを含めたい場合は、すべてのエクスポートをまとめたモジュールを作る。

 

 

2.内部モジュール

module句を定義する方法。

Typescript1.5.3から、新たに言語仕様namespaceキーワードが追加されました。namespace句でも可(ES6のmoduleと区別するためにこちらが推奨らしい)

 

 

 

スポンサーリンク

スポンサーリンク

-WEB, WEBフロントエンド開発

執筆者:

関連記事

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

JavaScriptのスコープとモジュールについて

仕様と問題点 JavaScriptにはアクセス修飾子はない。 JavaScriptのスコープは、「グローバルスコープ」と「関数スコープ(ローカルスコープ)」のみ。JavaScriptではスコープ(変数 ...

TypeScriptのソールファイル分割

TypeScriptのソールファイル分割の方法についてまとめました   目次1. <reference>によるグローバルモジュールによる方法2.import/exportによる外 ...

TypeScriptとSystemJSを使ったWEBフロントエンド開発

当セクションでは前回の『SystemJSを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、モジュール管理ツールとしてのSystemJSの機能を把握したいと思います。以前に紹介し ...

TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する

当セクションではTypeScript、Lite-Serverのパッケージを使った超簡単なWEBフロントエンドの開発環境の構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用しま ...