表示調整
閉じる
挿絵表示切替ボタン
▼配色
▼行間
▼文字サイズ
▼メニューバー
×閉じる

ブックマークに追加しました

設定
0/400
設定を保存しました
エラーが発生しました
※文字以内
ブックマークを解除しました。

エラーが発生しました。

エラーの原因がわからない場合はヘルプセンターをご確認ください。

142/210

関数の外部化(一例)

寄り道ばかりで進みませんが、これも最終的には役に立つと信じつつ


関数の外部化に成功したので、備忘録的に記述です。

(なにぶん、初心者に毛が生えたレベルですのでもっと適切な方法もあるかもです)


"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が教えてくれるはずのエラーがスルーされるのはうれしくないですね。


また定義や参照が探しづらいかも?


この部分の記述は、こっちのファイルに書きますよ!的な感じで、なおかつコーディング中は参照とか定義とか(あと検索)をあたかも一つのファイルに書いて有るがごとく処理できれば、文句ないのですが、そういう風には行きません。

評価をするにはログインしてください。
ブックマークに追加
ブックマーク機能を使うにはログインしてください。
― 新着の感想 ―
このエピソードに感想はまだ書かれていません。
感想一覧
+注意+

特に記載なき場合、掲載されている作品はすべてフィクションであり実在の人物・団体等とは一切関係ありません。
特に記載なき場合、掲載されている作品の著作権は作者にあります(一部作品除く)。
作者以外の方による作品の引用を超える無断転載は禁止しており、行った場合、著作権法の違反となります。

この作品はリンクフリーです。ご自由にリンク(紹介)してください。
この作品はスマートフォン対応です。スマートフォンかパソコンかを自動で判別し、適切なページを表示します。

↑ページトップへ