TypeScriptのモジュールについて | 業務プログラムの実践学習

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

（内部モジュール）

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

（外部モジュール）

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

１．外部モジュールについて

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

ES6 module 形式

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

export default function (){
    return 'f';
}
export function f1(){
    return 'f1';
}

export default function (){

return 'f';

}

export function f1(){

return 'f1';

}

//utilsを別名でインポートする
import * as u from './utils';
u.default();
u.f1();

//f1()をインポートする
import {f1} from './utils';
f1();

//utilsを別名でインポートする

import * as u from './utils';

u.default();

u.f1();

//f1()をインポートする

import {f1} from './utils';

f1();

CommonJS 形式

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

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

export function f(): string {
    return 'f';
}

export function f(): string {

return 'f';

}

import sub = require('./sub');
sub.f();

1 2	import sub = require('./sub'); sub.f();

コンパイル

tsc -m commonjs main.ts

1	tsc -m commonjs main.ts

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

node main.js

1	node main.js

AMD 形式

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

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

export function f(): string {
    return 'f';
}

export function f(): string {

return 'f';

}

import sub = require('./sub');
sub.f();

1 2	import sub = require('./sub'); sub.f();

コンパイル

tsc -m amd main.ts

1	tsc -m amd main.ts

コンパイルが成功すると、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 パッケージに複数のモジュールを含めたい場合は、すべてのエクスポートをまとめたモジュールを作る。

２．内部モジュール

module句を定義する方法。

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

// モジュールを使用することで名前空間を定義できる
// 1.5.3以前
module modA {
    export var a:string;
    var b:string; //exportを記述しないものは外部から参照できない
}
 
module modB {
    export var a:string;
}
 
modA.a = "Hello!"; //modA.bは参照できない
modB.a = "MyModule!";

 
//1.5.3以降からこのような書き方ができるようになる
namespace modA {
    export var a:string;
    var b:string; //exportを記述しないものは外部から参照できない
}

// モジュールを使用することで名前空間を定義できる

// 1.5.3以前

module modA {

export var a:string;

var b:string; //exportを記述しないものは外部から参照できない

}

module modB {

export var a:string;

}

modA.a = "Hello!"; //modA.bは参照できない

modB.a = "MyModule!";

//1.5.3以降からこのような書き方ができるようになる

namespace modA {

export var a:string;

var b:string; //exportを記述しないものは外部から参照できない

}