Typescriptにおける外部モジュール(external)、内部モジュール(internal)の書き方が分かりづらかったのでまとめたら

Typescriptのモジュールの書き方で、何がどうだと外部で、どのように扱うのか、また内部だとどう扱うのか、
なかなかパッとコード比較できるページがないためここに記しておく

ある別ファイルで定義されている関数を、
違うファイルから利用する為に

読み込まれる方（使われる関数を集めたファイル）
と
読み込む方（使いたいファイル）
で書き方が違う

書き方はこう
※「使われる関数を集めたファイル」はutil配下にしている

外部モジュール

(読み込まれる方/util/strings_external.ts)

util/strings_external.ts

export function trimLeft(str:string): string{
	return str.replace(/^¥s+/,'');
}//使いたい関数1
export function trimRight(str:string): string{
	return str.replace(/^¥s+/,'');
}//使いたい関数2

特徴
※トップレベルとしてexportが利用されている

(読み込む方/external.ts)

external.ts

import strings = require('./util/strings_external');
var input = document.getElementsByTagName('input')[0];//例
input.value = strings.trimLeft(input.value);

特徴
※importとして読み込み、その変数からアクセスしている
※requireとして参照している(common.js形式)

コンパイル
↓

zsh

cd currentdir
 tsc --module commonjs external.ts

コンパイル後
↓
(読み込まれる方/util/strings_external.js)

util/strings_external.js

function trimLeft(str) {
    return str.replace(/^¥s+/, '');
}
exports.trimLeft = trimLeft;
function trimRight(str) {
    return str.replace(/^¥s+/, '');
}
exports.trimRight = trimRight;

※exports.[関数]として代入になっている

(読み込む方/external.js)

external.js

var strings = require('./util/strings_external');
var input = document.getElementsByTagName('input')[0];
input.value = strings.trimLeft(input.value);

結合したファイル(external.js)

external.js

var strings = require('./util/strings_external');
var input = document.getElementsByTagName('input')[0];
input.value = strings.trimLeft(input.value);

※外部モジュールは読み込む方のtsを指定してコンパイルするので「結合したjsファイル=読み込む方のjs」ファイルですね。

内部モジュール

なんで内部モジュールが必要なのか？？
グローバル汚染しないように「名前空間」を使って書くため。

(読み込まれる方 util/strings_internal.ts)

util/strings_internal.ts

module app.util.strings {
	export	function trimLeft(str:string): string{
		return str.replace(/^¥s+/,'');
	}
	export	function trimRight(str:string): string{
		return str.replace(/^¥s+/,'');
	}
}

※app.util.strings←ここが名前空間の書き方。
以下のコンパイル後の「util/strings_internal.js」を見てみると汚染されない書き方にコンパイルされている。

(読み込む方/internal.ts)

internal.ts

/// <reference path="util/strings_internal.ts"/>
(function (){
	var input = document.getElementsByTagName('input')[0];
	input.value = app.util.strings.trimLeft(input.value);
})();

※///←自身のタグは自身で閉じないとエラーになるよ。

エラー風景

error TS1084: Invalid 'reference' directive syntax.

↓コンパイル

zsh

cd currentdir
 tsc --out out_internal.js internal.ts

※書き出しファイルをout_internal.jsとして命名

↓コンパイル後
(読み込まれる方 util/strings_internal.js)

util/strings_internal.js

var app;
(function (app) {
    var util;
    (function (util) {
        var strings;
        (function (strings) {
            function trimLeft(str) {
                return str.replace(/^¥s+/, '');
            }
            strings.trimLeft = trimLeft;
            function trimRight(str) {
                return str.replace(/^¥s+/, '');
            }
            strings.trimRight = trimRight;
        })(strings = util.strings || (util.strings = {}));
    })(util = app.util || (app.util = {}));
})(app || (app = {}));

(読み込む方 util/internal.js)

util/internal.js

/// <reference path="util/strings_internal.ts"/>
(function () {
    var input = document.getElementsByTagName('input')[0];
    input.value = app.util.strings.trimLeft(input.value);
})();

結合したファイル(out_internal.js)

out_internal.js

var app;
(function (app) {
    var util;
    (function (util) {
        var strings;
        (function (strings) {
            function trimLeft(str) {
                return str.replace(/^¥s+/, '');
            }
            strings.trimLeft = trimLeft;
            function trimRight(str) {
                return str.replace(/^¥s+/, '');
            }
            strings.trimRight = trimRight;
        })(strings = util.strings || (util.strings = {}));
    })(util = app.util || (app.util = {}));
})(app || (app = {}));
/// <reference path="util/strings_internal.ts"/>
(function () {
    var input = document.getElementsByTagName('input')[0];
    input.value = app.util.strings.trimLeft(input.value);
})();

ちょっとは参考になって頂ければ幸いです。

参照にしたサイトありがとうございます！

angular芸人やっています。
フォローおねがいしあｍす。