TypeScriptでモジュールのimport/exportやrequire

TypeScriptを書いていて、たまにimport出来なかったりして、そしたらrequireしたりとか、モジュールのインポートはふんいきでやっていたんですが、TypeScriptで古いJSのライブラリの型定義を書いていて気持ち悪かったので、調べました。

２つのモジュールインポート方法

CommonJS (Node.js)

インポート方法

• require

エクスポート方法

• module.export
• export

exportとmodule.exportの違い

例えば、require("some-module")とすると、id="some-module"で以下のようなコードが呼ばれる

const module = new Module(id)
(function(export, module) {
  /* モジュール本体のコードがここに差し込まれる */
  return module.export
}(module.export, module)

exportと、module.exportはモジュールが評価される関数への引数で、exportは、module.exportオブジェクトへのポインタ、関数が返しているmodule.exportは、引数で渡されているmoduleのexportプロパティなので、モジュール内でexportを上書きすると、exportが元のオブジェクトを指さなくなるので、期待通りに動かない。同じ理由で、moduleを上書きしてしまってもダメ。

ES6

インポート方法

個別

• import { x } from "module"
• import * as x from "module"

export defaultされたもの

• import x from "module"

エクスポート方法

個別

• export x

なにか１つだけexportしたい場合

• export default x

TypeScriptとJavaScriptでの違い

ない

どちらを使うか

インポートしたいモジュールが使っているやり方に合わせる。

まとめ

適当にimportやらrequireしていたのを、webpackがきれいにしてくれていたんですね。わかってよかった。