表題の通りです。
Udemyの講座がわかりやすかったので参考に載せておきます。
- Typescriptのコンパイル時に--outFileオプションをつけて、複数ファイルをまとめます(一つのjsファイルを吐き出す)
- 別ファイル（別の名前空間）に記載の関数にアクセスすることができます
やりたいことはapp.tsでmath1.tsとmath2.tsの名前空間にある関数を呼び出し、console.logで表示されるようにします。
まず、完成したファイルを記載致します。
console.log(MyMath.calcCircum(3));
console.log(MyMath.calcRect(2, 3));
namespace MyMath {
const PI = 3.14;
export function calcCircum(diameter: number) {
return diameter * PI;
}
}
namespace MyMath {
export function calcRect(height: number, width: number) {
return height * width;
}
}
Typescriptのnamespaceとは
-
namespace 名前空間名を設定することで、変数や関数等の使用できる空間を制限することができます。
上記のファイルを見るとnamespaceやexportといった見慣れないものがついていますが、元は以下のかたちの普通の関数です。
const PI = 3.14;
function calcCircum(diameter: number) {
return diameter * PI;
}
function calcRect(height: number, width: number) {
return height * width;
}
{}で囲むと空間を制限できます。これはTypescriptではなくES6の記法です。
{
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ですが空間を制限しているため同じ変数名で記載してもエラーは出ません。
{
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を追加しただけです。
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には呼び出したい関数を記載しておきます。
console.log(calcCircum(3));
console.log(calcRect(2, 3));
namespace MyMath {
const PI = 3.14;
function calcCircum(diameter: number) {
return diameter * PI;
}
}
namespace MyMath {
function calcRect(height: number, width: number) {
return height * width;
}
}
これだけだと、関数にアクセスができません。
関数にexportを追加します。
namespace MyMath {
const PI = 3.14;
export function calcCircum(diameter: number) {
return diameter * PI;
}
}
namespace MyMath {
export function calcRect(height: number, width: number) {
return height * width;
}
}
これで外部ファイルからもアクセスできる状態になりました。
app.ts側にもnamespace名を関数名の前に記載します。
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ファイルが吐き出されました。
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