Angular2Typescriptコンポーネントコンストラクターからコードをリファクタリングする方法

JesperRønn-Jensen

Angular 2ガイドには、コンストラクターを使用したこの例があります。

component://Typescript
class DisplayComponent {
  myName: string;
  names: Array<string>;
  constructor() {
    this.myName = "Alice";
    this.names = ["Aarav", "Martín", "Shannon", "Ariana", "Kai"];
  }
} 

https://angular.io/docs/ts/latest/guide/displaying-data.html#Create-an-arrayから2015年10月30日取得)

これは単純な例だと考えてください。しかし、実際には、コンストラクターはどんどん大きくなっています。また、構築時間だけでなく、同じロジックを複数の場所で使用する必要がある場合もあります。

私の最初の反応は、別の関数を作成し、それをインスタンスで呼び出すことでした。ただし、コンストラクターの実行時にインスタンスが作成されないため、Typescriptではこれを許可していません。

私の質問は、コンストラクターからコード行を抽出して、それを別の関数に引き出すにはどうすればよいですか?

ブルーノ・グリーダー

これはあなたが探しているものですか?

class MyClass {

    constructor( ) {
        MyClass.saySomething()
        this.sayItAll()
    }

    public static saySomething(){
        console.log('Hi')
    }

    public sayItAll(){
         console.log('Hello')
         MyClass.saySomething()
    }
}

したがってMyClass.saySomething()、MyClassのインスタンスなしで他のクラスから呼び出すこともできますか?

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

スマートコンポーネント内で2つの引数を使用するメソッドを使用して、スマート/ダムコンポーネントのコンポーネントをリファクタリングする

分類Dev

Angular2ルーティングの子コンポーネントからrouter.parent.navigateメソッドを呼び出すときに、コンポーネントコンストラクターとルーターライフサイクルフックがトリガーされない

分類Dev

コンポーネントhtmlからスクリプトファイルをロードする方法は?

分類Dev

メンバー変数を持つreactコンポーネントをes6クラスにリファクタリングする方法

分類Dev

テーブル列を別のコンポーネントにリファクタリングする方法は?

分類Dev

コンポーネントを返すときに&&()をリファクタリングする方法

分類Dev

Angularコンポーネントを改善するためのリファクタリング

分類Dev

Angularコンポーネントを多数の入出力から単一の構成オブジェクトにリファクタリングする

分類Dev

コンポーネントがAngular2Typescriptをレンダリングしない

分類Dev

Javaスクリプトコンパイラをリファクタリングするコード

分類Dev

ほぼ同じJSX構造でコンポーネントをリファクタリングする方法

分類Dev

VueJSでコンポーネントをJavascriptからTypescriptにリファクタリングするのに失敗しました

分類Dev

ループ反応コンポーネントをプレーンJavaScriptからタイプスクリプトにリファクタリング

分類Dev

コントローラーのJsonResultメソッドから疎結合モデルにjqGridコードをリファクタリングする方法は?

分類Dev

Reactフックを使用して機能コンポーネントをリファクタリングする

分類Dev

Admin-on-rest - リストからフィルタリングされたクエリと他のコンポーネントを同期する方法は?

分類Dev

クラスセレクタによるAngular2コンポーネントのレンダリング

分類Dev

コンポーネントからAngularサービス、カスタムクラスを初期化する方法は?

分類Dev

角度コンポーネントでカスタムTypeScriptクラスを使用する方法がわからない

分類Dev

Reactでswitchステートメントのコードをリファクタリングする方法は?

分類Dev

VueJS-スクリプトタグで単一のファイルコンポーネントのインスタンスを取得する方法

分類Dev

Angular7のボタンをクリックしてコンポーネントをロードする方法

分類Dev

Reactコンポーネントの名前を変更する方法と、「インポート」もリファクタリングする方法は?

分類Dev

Angular 2:コンポーネントクラスからtextareaをクリアする

分類Dev

ネストされたクエリからレコードをフィルタリングする-ElasticSearch

分類Dev

Angular:サービス/ファクトリからコントローラーにデータを渡します

分類Dev

タイプスクリプトコードをvueコンポーネントに実装する方法は?

分類Dev

Angular:多くのコンポーネントが重要なイベントをリッスンします-リファクタリング?

分類Dev

C ++静的ファクトリメソッドとコンストラクタ:コピーを回避する方法は?

Related 関連記事

  1. 1

    スマートコンポーネント内で2つの引数を使用するメソッドを使用して、スマート/ダムコンポーネントのコンポーネントをリファクタリングする

  2. 2

    Angular2ルーティングの子コンポーネントからrouter.parent.navigateメソッドを呼び出すときに、コンポーネントコンストラクターとルーターライフサイクルフックがトリガーされない

  3. 3

    コンポーネントhtmlからスクリプトファイルをロードする方法は?

  4. 4

    メンバー変数を持つreactコンポーネントをes6クラスにリファクタリングする方法

  5. 5

    テーブル列を別のコンポーネントにリファクタリングする方法は?

  6. 6

    コンポーネントを返すときに&&()をリファクタリングする方法

  7. 7

    Angularコンポーネントを改善するためのリファクタリング

  8. 8

    Angularコンポーネントを多数の入出力から単一の構成オブジェクトにリファクタリングする

  9. 9

    コンポーネントがAngular2Typescriptをレンダリングしない

  10. 10

    Javaスクリプトコンパイラをリファクタリングするコード

  11. 11

    ほぼ同じJSX構造でコンポーネントをリファクタリングする方法

  12. 12

    VueJSでコンポーネントをJavascriptからTypescriptにリファクタリングするのに失敗しました

  13. 13

    ループ反応コンポーネントをプレーンJavaScriptからタイプスクリプトにリファクタリング

  14. 14

    コントローラーのJsonResultメソッドから疎結合モデルにjqGridコードをリファクタリングする方法は?

  15. 15

    Reactフックを使用して機能コンポーネントをリファクタリングする

  16. 16

    Admin-on-rest - リストからフィルタリングされたクエリと他のコンポーネントを同期する方法は?

  17. 17

    クラスセレクタによるAngular2コンポーネントのレンダリング

  18. 18

    コンポーネントからAngularサービス、カスタムクラスを初期化する方法は?

  19. 19

    角度コンポーネントでカスタムTypeScriptクラスを使用する方法がわからない

  20. 20

    Reactでswitchステートメントのコードをリファクタリングする方法は?

  21. 21

    VueJS-スクリプトタグで単一のファイルコンポーネントのインスタンスを取得する方法

  22. 22

    Angular7のボタンをクリックしてコンポーネントをロードする方法

  23. 23

    Reactコンポーネントの名前を変更する方法と、「インポート」もリファクタリングする方法は?

  24. 24

    Angular 2:コンポーネントクラスからtextareaをクリアする

  25. 25

    ネストされたクエリからレコードをフィルタリングする-ElasticSearch

  26. 26

    Angular:サービス/ファクトリからコントローラーにデータを渡します

  27. 27

    タイプスクリプトコードをvueコンポーネントに実装する方法は?

  28. 28

    Angular:多くのコンポーネントが重要なイベントをリッスンします-リファクタリング?

  29. 29

    C ++静的ファクトリメソッドとコンストラクタ:コピーを回避する方法は?

ホットタグ

アーカイブ