JS デコレータ パターンと TypeScript デコレータ

// 女の子クラス Girl {
  フェイスバリュー() {
    console.log('私のオリジナルの顔')
  }
}

クラス ThinFace {
  コンストラクタ(女の子) {
    this.girl = 女の子;
  }
  フェイスバリュー() {
    この女の子の顔の値();
    console.log('顔痩せをオンにする')
  }
}

クラスIncreasingEyes{
  コンストラクタ(女の子) {
    this.girl = 女の子;
  }
  フェイスバリュー() {
    この女の子の顔の値();
    console.log('目を大きくしましょう')
  }
}

girl = new Girl();
女の子 = 新しい ThinFace(女の子);
女の子 = 新しい IncreasingEyes(女の子);

// 目をつぶる girl.faceValue(); //

女の子を = {
  フェイスバリュー() {
    console.log('私のオリジナルの顔')
  }
}
関数thinFace() {
  console.log('顔痩せをオンにする')
}
関数IncreasingEyes() {
  console.log('目を大きくしましょう')
}

女の子.faceValue = 関数(){
  const originalFaveValue = girl.faceValue; // オリジナル関数 return function() {
    元のお気に入り値.call(女の子);
    thinFace.call(女の子);
  }
}()
女の子.faceValue = 関数(){
  const originalFaveValue = girl.faceValue; // オリジナル関数 return function() {
    元のお気に入り値.call(女の子);
    IncreasingEyes.call(女の子);
  }
}()

女の子.faceValue();

tsc --target ES5 --experimentalDecorators test.ts

{
    "コンパイラオプション": {
        "ターゲット": "ES5",
        "実験的デコレータ": true
    }
}

//新しい行に@test1を記述する
@テスト2
宣言

// @test1 @test2 の行を書き込みます...
宣言

関数thinFace() {
  console.log('顔痩せをオンにする')
}

薄い顔
クラス ガール {
}

関数thinFace() {
  console.log('顔痩せをオンにする')
}
関数IncreasingEyes() {
  console.log('目を大きくしましょう')
}

薄い顔
もっと見る
クラス ガール {
}

関数thinFace(値:文字列){
  console.log('1-面を薄くするファクトリーメソッド')
  関数()を返す{
    console.log(`4-私は小顔デコレータです。小顔になりたいです ${value}`)
  }
}
関数IncreasingEyes(値:文字列) {
  console.log('2-目を拡大するファクトリーメソッド')
  関数()を返す{
    console.log(`3-私は目を大きくするデコレータなので、${value}が必要です`)
  }
}

@薄い顔('50%')
@IncreasingEyes('ダブル')
クラス ガール {
}

関数クラスデコレータ(値: 文字列){
  関数(コンストラクタ)を返す{
    console.log('コンストラクタを受信します')
  }
}

関数thinFace(コンストラクタ){
  コンストラクター.プロトタイプ.thinFaceFeature = function() {
    console.log('面細化関数')
  }
}

薄い顔
@classDecorator('クラスデコレータ')
クラス Girl {}

g = new Girl();

g.thinFaceFeature(); // '細い顔の特徴'

関数メソッドDecorator(値: 文字列, Girl){
  関数(プロトタイプ、キー、記述子)を返す{
    console.log('プロトタイプ オブジェクト、装飾されたプロパティ名、プロパティ記述子を受信します'、Girl.prototype === prototype)
  }
}

関数thinFace(プロトタイプ、キー、記述子){
  // 元のメソッドのロジックを保持します。let originalMethod = description.value;
  // 書き直し、ロジックを追加し、元のロジックを実行します。descriptor.value = function(){
    originalMethod.call(this); // これは console.log('顔痩せモードをオンにする') を指していることに注意してください
  }
}

クラス ガール {

  薄い顔
  @methodDecorator('メソッド デコレータ', Girl)
  フェイスバリュー(){
    console.log('私の本来の姿')
  }
}

g = new Girl();

g.faceValue();

関数プロパティデコレータ(値: 文字列、Girl){
  関数(プロトタイプ、キー)を返す{
    console.log('プロトタイプ オブジェクト、装飾されたプロパティ名、プロパティ記述子を受信します'、Girl.prototype === prototype)
  }
}

関数thinFace(プロトタイプ、キー){
  console.log(プロトタイプ、キー)
}

クラス ガール {
  薄い顔
  @propertyDecorator('プロパティ デコレータ', 女の子)
  公年齢: 数値 = 18;
}

g = new Girl();

console.log(g.age); // 18

関数クラスデコレータ(値: 文字列){
  console.log(値)
  関数(){}を返す
}
関数プロパティデコレータ(値: 文字列) {
  console.log(値)
  関数()を返す{
    コンソールログ('プロパティデコレータ')
  }
}
関数メソッドデコレータ(値: 文字列) {
  console.log(値)
  関数()を返す{
    console.log('メソッドデコレータ')
  }
}
関数paramDecorator(値: 文字列) {
  console.log(値)
  関数()を返す{
    コンソールログ('paramDecorator')
  }
}
関数AccessDecorator(値:文字列) {
  console.log(値)
  関数()を返す{
    console.log('アクセスデコレータ')
  }
}
関数thinFace(){
  console.log('薄い顔')
}
関数IncreasingEyes() {
  console.log('目を大きくしましょう')
}


薄い顔
@classDecorator('クラスデコレータ')
クラス ガール {
  @propertyDecorator('プロパティデコレータ')
  年齢: 数字 = 18;
  
  @AccessDecorator('アクセス デコレータ')
  都市を取得します（）{}

  @methodDecorator('メソッドデコレータ')
  もっと見る
  フェイスバリュー(){
    console.log('元の顔')
  }

  getAge(@paramDecorator('パラメータデコレータ') 名前: 文字列){}
}

tsc --target ES5 --experimentalDecorators face.ts

__飾る（[
    propertyDecorator('プロパティデコレータ')
], Girl.prototype, "age", void 0);
__飾る（[
    AccessDecorator('アクセス デコレータ')
], Girl.prototype, "city", null);
__飾る（[
    methodDecorator('メソッドデコレータ'),
    増加する目
], Girl.prototype, "faceValue", null);
__飾る（[
    __param(0, paramDecorator('パラメータデコレータ'))
], Girl.prototype, "getAge", null);
女の子 = __decorate([
    薄い顔、
    classDecorator('クラスデコレータ')
]、 女の子）;

// この関数は既に存在するので直接使用するか、自分で定義してください。 var __decorate = (this && this.__decorate) ||
// 4 つのパラメータを受け取ります: 
//デコレータはデコレータ関数の配列とターゲットプロトタイプオブジェクト|クラスを格納します。
//キー属性名、desc 説明 (未定義または null)
関数(デコレータ、ターゲット、キー、説明) {
  var c = 引数.長さ、
  // パラメータの数を取得します r = c < 3 // パラメータの数が 3 未満の場合、クラスデコレータであることを意味し、クラスを直接取得しますか? ターゲット
    : desc === null // 4 番目のパラメータが null の場合、オブジェクトを説明する必要があります。プロパティ デコレータは void 0 を渡し、説明オブジェクトはありません。
        ?desc = Object.getOwnPropertyDescriptor(ターゲット、キー) 
        : 説明,
  d;
  // Reflect.decorate メソッドが提供されている場合は直接呼び出します。そうでない場合は自分で実装します if (typeof Reflect === "object" && typeof Reflect.decorate === "function") 
    r = Reflect.decorate(デコレータ、ターゲット、キー、説明);
  それ以外 
    // デコレータ関数の実行順序は、記述された順序とは逆で、下から上へ実行されます。for (var i = decorators.length - 1; i >= 0; i--) 
      if (d = decorators[i]) // デコレータ関数を取得します r = (c < 3 // パラメータの数が 3 未満の場合、クラスデコレータであることを意味します。デコレータ関数を実行し、クラスに直接渡しますか? d(r) 
            : c > 3 // パラメータの数が 3 より大きく、メソッド デコレータ、アクセサ デコレータ、またはパラメータ デコレータの場合は、渡された説明オブジェクトを実行しますか? d(target, key, r) 
              : d(target, key) // これはプロパティ デコレータであり、説明オブジェクトは渡されません) || r;

  // 装飾された属性（主にメソッドと属性）の説明オブジェクトを設定します/*** 
     * r の値には 2 つのケースがあります。
     * 1 つは上記の Object.getOwnPropertyDescriptor を通じて取得された値です。 * もう 1 つはデコレータ関数が実行された後の戻り値であり、説明オブジェクトとして使用されます。
     * 一般に、デコレータ関数は値を返しません。
    */
  c > 3 && r && Object.defineProperty(target, key, r),r を返します。
};

var __param = (this && this.__param) || function (paramIndex, デコレータ) {
    関数 (ターゲット、キー) を返します { デコレータ (ターゲット、キー、paramIndex); }
};