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

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

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

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

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

app.ts

console.log(MyMath.calcCircum(3));
console.log(MyMath.calcRect(2, 3));

math1.ts

namespace MyMath {
  const PI = 3.14;

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

math2.ts

namespace MyMath {
  export function calcRect(height: number, width: number) {
    return height * width;
  }
}

Typescriptのnamespaceとは

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

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

before.ts

const PI = 3.14;

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

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

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ですが空間を制限しているため同じ変数名で記載してもエラーは出ません。

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を追加しただけです。

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には呼び出したい関数を記載しておきます。

app.ts

console.log(calcCircum(3));
console.log(calcRect(2, 3));

math1.ts

namespace MyMath {
  const PI = 3.14;

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

math2.ts

namespace MyMath {
  function calcRect(height: number, width: number) {
    return height * width;
  }
}

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

math1.ts

namespace MyMath {
  const PI = 3.14;

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

math2.ts

namespace MyMath {
  export function calcRect(height: number, width: number) {
    return height * width;
  }
}

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

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

app.ts

console.log(MyMath.calcCircum(3));
console.log(MyMath.calcRect(2, 3));

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

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

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

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

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

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ですね。

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

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

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

参考：Udemy Typescript 基礎講座