関数の外部化(一例)
寄り道ばかりで進みませんが、これも最終的には役に立つと信じつつ
関数の外部化に成功したので、備忘録的に記述です。
(なにぶん、初心者に毛が生えたレベルですのでもっと適切な方法もあるかもです)
"home.page.ts"がどんどん長いコードになってきたのでどうにかしたいという話の続きです。
別の事を調べていたのですが、関数はそれ自体が変数で有ると言う記述を見つけたので、リンク元失念しましたが、もしかしてと試したのが以下のような書き方です。
src/assets/code/function.ts
---------------------------------------------------------------
export function testFunction(){
alert(this.text1)
}
---------------------------------------------------------------
src/app/home/home.page.ts
---------------------------------------------------------------
import {testFunction} from 'src/assets/code/function'
中略
export class HomePage {
//インポートした関数を関数変数に代入
testFunction=testFunction
//アラート用の変数
text1="test text"
constructor() {
this.testFunction();
}
---------------------------------------------------------------
胆は、インポートした関数を同名の関数にセットしているところです。
これで"home.page.ts"も見やすくなるとよいですね。
なお、相対パスの基準点ですが、"tsconfig.json"の場所が基準だそうです。
("tsconfig.json"はTypeScript関係の設定ファイル)
追記
その後見つけたサイトですが、TypeScriptのexportとimportが詳しく載っていました。
TypeScript - export/import
https://9cubed.info/article/typescript/0033
他にも名前空間とか書きたいことが色々出てきましたが、まだよく判っていないのでその内ですね。
追記②
難点としては、どうしても実行時エラーが増える。
"home.page.ts"に全部書いておけば、コーディング中にVisualStudioCodeが教えてくれるはずのエラーがスルーされるのはうれしくないですね。
また定義や参照が探しづらいかも?
この部分の記述は、こっちのファイルに書きますよ!的な感じで、なおかつコーディング中は参照とか定義とか(あと検索)をあたかも一つのファイルに書いて有るがごとく処理できれば、文句ないのですが、そういう風には行きません。