Angular2での依存性注入の構文

セドリックフランソワ

typescriptで記述されたAngularComponentsでは、コンストラクターのパラメーターとしてクラスメンバー(変数)を宣言することができます。私の質問は、なぜそうするのかについてです。
明確にするために、以下のスニペットを参照してください。どちらも同じ意味です。

  • 1つ目は、依存性注入メカニズムを使用してプライベートメンバーを定義する古典的な方法です(ほとんどのオブジェクト指向言語で行われているように)。
  • 後者は、私が誤解しない限り、TypeScriptの特異性です。

export class HeroListComponent implements OnInit {
    // private member declaration
    private heroService:HeroService;

    // constructor signature
    constructor(service:HeroService) {
        // private member assignment
        this.heroService = service;
    }
}

export class HeroListComponent implements OnInit {
    // here the private member is declared inside the constructor signature
    constructor(private heroService:HeroService) { }
}

私の意見では、TypeScriptに慣れていない人にとって、最初の構文はより明確で理解しやすいものです。
それで、後者を使用するために、より短いこと(コードが最終的に縮小/醜くなるので実際には問題ではない)以外に特別な理由があるかどうか疑問に思いました。ありがとう。

フランク・モディカ

編集:この回答は、2番目の例が次のようになっている元の質問(現在は編集済み)に対応しています。

export class HeroListComponent implements OnInit {
    // here the private member is declared inside the constructor signature
    constructor(private service:HeroService) { 
        this.heroService = service;
    }
}

2番目の例では、実際には2つのクラスプロパティを作成しています。両方this.servicethis.heroServiceあなたのオブジェクトに存在します。

2番目の例は、次のようなものです。

export class HeroListComponent implements OnInit {
    private heroService: HeroService;
    private service: HeroService;

    constructor(service:HeroService) {
        this.service = service;
        this.heroService = service;
    }
}

2番目の例のスタイルは、クラスプロパティがコンストラクターのパラメーターと同じ名前を持つことができる場合に役立ちます。両方に名前heroServiceを付けることができる場合は、次のようにすることができます。

export class HeroListComponent implements OnInit {
    constructor(private heroService:HeroService) {  }
}

利点は、それが混乱を取り除くことです。クラス内のプロパティの宣言と、そのクラスプロパティへのコンストラクターパラメーターの割り当ての両方がなくなりました。それは必ずしもあなたにとってよりきれいで読みやすいとは限りません。

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

Angular2での依存性注入-TypeScript構文と@Inject

分類Dev

依存性注入の問題-Angular2

分類Dev

依存性注入Angular2

分類Dev

Angular2依存性注入

分類Dev

モジュールでのAngular2依存性注入を理解する

分類Dev

抽象クラスtypescript(Angular2)への依存性注入

分類Dev

デコレータのAngular2依存性注入

分類Dev

MethodInterceptorでの依存性注入

分類Dev

ViewControllerでの依存性注入

分類Dev

角度での注入依存性

分類Dev

TestBenchTestCaseでの依存性注入

分類Dev

AngularJSでの依存性注入

分類Dev

Arduinoでの依存性注入

分類Dev

Symfony での依存性注入

分類Dev

パイプでのAngular 2依存性注入

分類Dev

サービスベースのAngular2プロジェクトで依存性注入を使用する方法

分類Dev

Yii2の依存性注入、構成、継承

分類Dev

SpringとScalaを使用した複数の依存性注入の構文は何ですか?

分類Dev

ES5およびES6でのAngular 2依存性注入

分類Dev

依存性注入でのIHtmlHelperの使用

分類Dev

mvcでの依存性注入の操作

分類Dev

Angular2で互いに素な依存性注入器を取得する

分類Dev

Jersey 2.0での依存性注入

分類Dev

OSGI環境での依存性注入

分類Dev

ASP.NETCoreでの依存性注入

分類Dev

Azure関数でのAutofac依存性注入

分類Dev

.net 4.7での依存性注入?

分類Dev

super()でのtypescript依存性注入

分類Dev

djangoビューでの依存性注入