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

執筆者:

関連記事

Node.jsのrequire関数のモジュール読み込みについて

Node.js のモジュール機構について(JavaScript の場合) ディレクトリ構造 Node.js のパッケージマネージャーである npm を使う場合、プロジェクト ディレクトリは以下のような ...

ES6のクラス定義について

  概要 JavaScript はプロトタイプベースの言語であり、クラスベースの言語とは異なりクラスというものが存在しませんでした。 プロトタイプを使ってクラスと同等なことを実現するというこ ...

HTML5についてのメモ書き

FileSystem API     HTML5 FileSystem Explorer Chromeの拡張機能に「HTML5 FileSystem Explorer」というツール ...

Reactに関するメモ

    1.ReactでComponentのRenderが行われるタイミング ReactでComponentのRenderが行われるのは以下2つのタイミングのみ stateを更新す ...

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

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


プロフィール
管理人です。 業務プログラムに勤しむ人です プロフィール詳細


検索

カテゴリ

アーカイブ