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

執筆者:

関連記事

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

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

ES6のクラス定義について

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

Javascriptのアロー関数について

  アロー関数 ES2015(ES6)の新構文の一つ 無名関数の省略記法。 無名関数とアロー関数とは完全に等価というわけではないため、取り扱いにはいくつかの注意が必要。 =>(矢)を使 ...

Reactに関するメモ

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

SEO対策のまとめ

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