ファイルモジュール

グローバル名前空間

デフォルトでは、新しいTypeScriptファイルにコードを入力すると、コードはグローバルの名前空間に追加されます。デモとして、foo.tsファイルを考えてみましょう:
1
var foo = 123;
Copied!
同じプロジェクトで新しいファイルbar.tsを作成したとします。TypeScriptの型システムは、この新しいファイルの中で、変数fooをグローバルに利用することを許可します:
1
var bar = foo; // 許可されます
Copied!
言うまでもありませんが、グローバル名前空間を使うと、名前が競合する危険があります。次に説明するファイルモジュールを使用することをお勧めします。

ファイルモジュール

外部モジュールとも呼ばれます。TypeScriptファイルにimportまたはexportが存在する場合、そのファイル内に閉じたローカルスコープが作成されます。上で説明したfoo.tsを次のように変更してみます(exportに注目してください):
1
export var foo = 123;
Copied!
私達はもはや、グローバルのfooを持っていません。これは、次のように新しいファイル bar.tsを作成することで実際に確認できます:
1
var bar = foo; // ERROR: "'foo'が見つかりません"
Copied!
bar.tsfoo.tsのものを使いたい場合明示的にインポートする必要があります。これを以下の更新版のbar.tsに示します:
1
import { foo } from "./foo";
2
var bar = foo; // 許可されます
Copied!
bar.tsimportを使うと、他のファイルから取り込むことができるだけでなく、ファイルbar.tsをモジュールとして認識するので、bar.tsでの宣言はグローバル名前空間を汚染しません。
外部モジュールを使用するTypeScriptファイルをJavaScriptにコンパイルできるようにするには、moduleオプションをtsconfig.jsonで設定する必要があります。
最終更新 1yr ago