トリプルスラッシュ・ディレクティブ
なんかかっこいい必殺技みたいな名前ですね。
ソースコードの整理をあきらめられずに(と言うか出来ないわけが無いと思う)方法を探していたところで見つけたのがコレ、”トリプルスラッシュ・ディレクティブ”です。
参照サイト
TypeScriptで複数ファイル構成する2つの方法
https://teppeis.hatenablog.com/entry/2014/05/typescript-external-modules
やりたいことはソースコードの分割で、上記サイトにも書いて有るようにJavascript なら<script>タグを増やせばいいだけじゃないですか。
そこで2つの方法のうち、最初の方法を試してみました。
"util/strings.ts"に変数を定義して
"home.page.ts"でその変数を使おうとするとエラーが出ますが、以下のトリプルスラッシュと<reference>タグを使うとエラーが消えます！
/// <reference path="util/strings.ts">
感動しつつもionic serveで動かすと・・・
error TS2304: Cannot find name '変数名'.
何故？
何故と書きましたが、なんとなく理由は判ります。
ソースコードの時点では、(おそらく)VisualStudioCodeが気を利かせて、グローバル名前空間にその変数名をセットしたんでしょうが、ionic serveで動かした時は、コンパイル時に何らかのファイルに書き出すオプションをつけていないので、(ファイルが無い、つまり参照も存在しないため)参照できなかったという事と推測します。
$ tsc --out out.js main.ts
みたいな感じのようです。
そこで"typescript angular --outオプション"で検索して見つけたAngular公式サイトを見ると
Angular コンパイラオプション
https://angular.jp/guide/angular-compiler-options#skipmetadataemit
------------------------------------------
TypeScript の --outFile オプションを使用している場合は、このオプションを true に設定してください。 メタデータファイルはこのスタイルの TypeScript 出力には無効です。Angular で --outFile を使用することはお勧めできません。 代わりに、webpack などのバンドラーを使用してください。
------------------------------------------
と書いて有るので、この方法は使わない方が良いのかも？
さて2番目の方法も、VisualStudioCode上では問題ないですが、同じくionic serveでは動かず。
(どこにあるか、どういじればいいか不明ですが)コンパイルオプションをいじれば出来る気もするのですが、現時点の知識と経験では荷が重そう。
今後の目標にという事にいたします。
追記
色々調べると知識(あるいは技術の歴史的経緯)として面白い情報ですね、webpack。
Angular/TypeScriptプロジェクトのコンパイルの仕組み
https://tech.quartetcom.co.jp/2017/07/20/angular2-compilation/
【Angular12対応】Angular12でWebpack5をサクッと使ってみよう
https://deep.tacoskingdom.com/blog/121
もしかして、また挑戦していじってみるかもしれません。
