ファイルモジュール

グローバル名前空間

デフォルトでは、新しいTypeScriptファイルにコードを入力すると、コードは_グローバルの_名前空間に追加されます。デモとして、foo.tsファイルを考えてみましょう：

var foo = 123;

同じプロジェクトで新しいファイルbar.tsを作成したとします。TypeScriptの型システムは、この新しいファイルの中で、変数fooをグローバルに利用することを許可します：

var bar = foo; // 許可されます

言うまでもありませんが、グローバル名前空間を使うと、名前が競合する危険があります。次に説明するファイルモジュールを使用することをお勧めします。

ファイルモジュール

外部モジュールとも呼ばれます。TypeScriptファイルにimportまたはexportが存在する場合、そのファイル内に閉じたローカルスコープが作成されます。上で説明したfoo.tsを次のように変更してみます(exportに注目してください)：

export var foo = 123;

私達はもはや、グローバルのfooを持っていません。これは、次のように新しいファイル bar.tsを作成することで実際に確認できます：

var bar = foo; // ERROR: "'foo'が見つかりません"

bar.tsでfoo.tsのものを使いたい場合_明示的にインポートする必要があります_。これを以下の更新版のbar.tsに示します：

import { foo } from "./foo";
var bar = foo; // 許可されます

bar.tsでimportを使うと、他のファイルから取り込むことができるだけでなく、ファイルbar.tsをモジュールとして認識するので、bar.tsでの宣言はグローバル名前空間を汚染しません。

外部モジュールを使用するTypeScriptファイルをJavaScriptにコンパイルできるようにするには、moduleオプションをtsconfig.jsonで設定する必要があります。