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

![images.jpg](https://qiita-image-store.s3.amazonaws.com/0/64377/505feac7-005c-fd5e-222b-0001270026f7.jpeg)


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

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

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

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

# 外部モジュール
(読み込まれる方/util/strings_external.ts)

```javascript: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)

```js: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:zsh
cd currentdir
 tsc --module commonjs external.ts
```
コンパイル後
↓
(読み込まれる方/util/strings_external.js)

```javascript: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)

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

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

```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)


```javascript: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)

```js:internal.ts

/// <reference path="util/strings_internal.ts"/>
(function (){
	var input = document.getElementsByTagName('input')[0];
	input.value = app.util.strings.trimLeft(input.value);
})();
```
※///<reference path="***" />←自身のタグは自身で閉じないとエラーになるよ。

```zsh:エラー風景

error TS1084: Invalid 'reference' directive syntax.
```


↓コンパイル

```zsh:zsh
cd currentdir
 tsc --out out_internal.js internal.ts
```
※書き出しファイルをout_internal.jsとして命名

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

```javascript: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)

```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)

```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);
})();

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

[参照にしたサイトありがとうございます！](http://teppeis.hatenablog.com/entry/2014/05/typescript-external-modules)

angular芸人やっています。
[フォローおねがいしあｍす。](https://instagram.com/moriken0801/)