TypeScriptグローバルモジュール

モジュールロード/非モジュールロード - (新) 檜山正幸のキマイラ飼育記 メモ編 の続き。

今は非推奨の古い方式だが、TypeScriptのimport構文もどきがある。

/// <reference path="lib-foo.ts">
/* main.ts */

C言語の include に近い。コンパイル時に lib-foo.ts の内容が見える。一応、依存性の記述にもなっている。

https://teppeis.hatenablog.com/entry/2014/05/typescript-external-modules から引用すると:

グローバル空間を使って異なるファイル間で関数やクラスを共有しているだけなので、 TypeScriptの仕様書ではグローバルモジュール (global module) と呼ばれている。

tsc --out out.js main.ts とすると、out.js 内に lib-foo.ts が取り込まれたファイル out.js が出力される。tsc が一種のバンドラーとして機能している。HTML内にscriptタグを並べるよりはマシだろう。なぜなら:

  • HTML側では、<scritp src="out.js"><script> とだけ書けばよい。
  • モジュール編成が変わっても、HTML側を変える必要がない。
  • reference特殊構文を追跡すれば、ファイル=グローバルモジュールのあいだの依存性が分かる。

しかし、グローバル空間=大域オブジェクトにすべてのエンティティ(関数、変数など)をセットするので「グローバル汚染」「コンフリクト」を避けることはできない。