Typescriptのコンパイル時に--outFileオプションをつけて、複数ファイルをまとめる

 表題の通りです。
Udemyの講座がわかりやすかったので参考に載せておきます。

- Typescriptのコンパイル時に--outFileオプションをつけて、複数ファイルをまとめます(一つのjsファイルを吐き出す)
- 別ファイル（別の名前空間）に記載の関数にアクセスすることができます 

やりたいことはapp.tsでmath1.tsとmath2.tsの名前空間にある関数を呼び出し、```console.log```で表示されるようにします。

まず、完成したファイルを記載致します。

```typescript:app.ts
console.log(MyMath.calcCircum(3));
console.log(MyMath.calcRect(2, 3));
```

```typescript:math1.ts
namespace MyMath {
  const PI = 3.14;

  export function calcCircum(diameter: number) {
    return diameter * PI;
  }
}
```

```typescript:math2.ts
namespace MyMath {
  export function calcRect(height: number, width: number) {
    return height * width;
  }
}
```

## Typescriptのnamespaceとは
- ```namespace 名前空間名```を設定することで、変数や関数等の使用できる空間を制限することができます。

上記のファイルを見ると```namespace```や```export```といった見慣れないものがついていますが、元は以下のかたちの普通の関数です。

```typescript:before.ts

const PI = 3.14;

function calcCircum(diameter: number) {
  return diameter * PI;
}
function calcRect(height: number, width: number) {
  return height * width;
}
```

```{}```で囲むと空間を制限できます。これはTypescriptではなくES6の記法です。

```typescript:before.ts

{
  const PI = 3.14;

  function calcCircum(diameter: number) {
    return diameter * PI;
  }
  function calcRect(height: number, width: number) {
    return height * width;
  }
}
```

よって以下の書き方でconsoleでは```3.14```と```2.14```が吐き出されます。
一つ目の```console.log(PI)```が```{}```の外側かつ```const PI = 2.14;```の上に記載された場合は、PIにアクセスできないためエラーとなります。
2回目のPIもconstですが空間を制限しているため同じ変数名で記載してもエラーは出ません。

```typescript:before.ts

{
  const PI = 3.14;

  function calcCircum(diameter: number) {
    return diameter * PI;
  }
  function calcRect(height: number, width: number) {
    return height * width;
  }
  console.log(PI)
}

const PI = 2.14;
console.log(PI)
```

この```{}```をTypescriptで記載したのが```namespace```という認識で、書き方は以下のように非常にシンプルです。
```{}```の前に```namespace MyMath```を追加しただけです。


```typescript:before.ts
namespace MyMath {
  const PI = 3.14;

  function calcCircum(diameter: number) {
    return diameter * PI;
  }
  function calcRect(height: number, width: number) {
    return height * width;
  }
}
```


これでほぼほぼ完成なのですが、別ファイルから```calcCircum```、```calcRect```にアクセスしたいというケースがあると思います。
例として先ほどのbefore.tsをapp.ts、math1.ts、math2.tsに分解します。app.tsには呼び出したい関数を記載しておきます。

```typescript:app.ts
console.log(calcCircum(3));
console.log(calcRect(2, 3));
```

```typescript:math1.ts
namespace MyMath {
  const PI = 3.14;

  function calcCircum(diameter: number) {
    return diameter * PI;
  }
}
```

```typescript:math2.ts
namespace MyMath {
  function calcRect(height: number, width: number) {
    return height * width;
  }
}
```

これだけだと、関数にアクセスができません。
関数に```export```を追加します。

```typescript:math1.ts
namespace MyMath {
  const PI = 3.14;

  export function calcCircum(diameter: number) {
    return diameter * PI;
  }
}
```

```typescript:math2.ts
namespace MyMath {
  export function calcRect(height: number, width: number) {
    return height * width;
  }
}
```

これで外部ファイルからもアクセスできる状態になりました。

app.ts側にもnamespace名を関数名の前に記載します。

```typescript:app.ts
console.log(MyMath.calcCircum(3));
console.log(MyMath.calcRect(2, 3));
```


上記3ファイルを一つのapp.jsにコンパイルすることで、最終的に```console.log```がエラーなく表示できる状態になります。

```terminal
tsc --outFile app.js math1.ts math2.ts app.ts
```

※読み込み順に注意が必要です。app.tsで関数を呼び出したいので、app.tsを最後に記載します。仮にhtmlでscriptタグを記載した場合と同様の並びにしてください。

```html
<script src="math1.js"></script>
<script src="math2.js"></script>
<script src="app.js"></script>
```


上記のコマンドで最終的に以下のjsファイルが吐き出されました。

```javascript:app.js
var MyMath;
(function (MyMath) {
    var PI = 3.14;
    function calcCircum(diameter) {
        return diameter * PI;
    }
    MyMath.calcCircum = calcCircum;
})(MyMath || (MyMath = {}));
var MyMath;
(function (MyMath) {
    function calcRect(height, width) {
        return height * width;
    }
    MyMath.calcRect = calcRect;
})(MyMath || (MyMath = {}));
console.log(MyMath.calcCircum(3));
console.log(MyMath.calcRect(2, 3));

```

htmlではこのapp.js一つ記載すればOKですね。

```html

<script src="app.js"></script>
```

node.jsで検証するとエラーなく表示されました。

```terminal
PS C:\Users\該当ディレクトリ\typescript> node math1.js
9.42
6
```


> 参考：[Udemy Typescript 基礎講座](https://www.udemy.com/course/typescript-y/)