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フロントエンド開発

執筆者:

関連記事

Chromeを使ったAngular-cliのオンラインデバッグの方法について

当セクションでは、angular-cliの開発において、ブレイクポイントを設定するオンラインデバッグの方法について説明したいと思います。ChromeのデベロッパーツールによってTypescriptのソ ...

SEO対策のまとめ

SEO対策は良く言われるように、(1)クローラーの巡回フェーズ、(2)ページのインデックス登録フェーズ、(3)検索順位決定フェーズの3つのフェーズで考える必要があるようです。SEO対策は様々なWEBペ ...

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

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

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

当セクションはSystemJSを使ったWEBフロントエンド開発について説明します。JavaScriptをロードするための最も基本的な方法はscriptタグで実現することですが、SPAを構築するフロント ...

lite-serverを使った開発サーバの構築

Lite-Serverのパッケージを使った開発サーバの構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用します。 記載した実行環境は以下の通りです。Node.jsのインストー ...