export interface SimpleChange<T> {

  firstChange: boolean;

  previousValue: T;

  currentValue: T;

  isFirstChange: () => boolean;

}

function OnChange<T = any>(

  callback: (value: T, simpleChange?: SimpleChange<T>) => void

) {

  console.log("callback", callback);

  const cachedValueKey = Symbol();

  const isFirstChangeKey = Symbol();

  return (target, key) => {

    Object.defineProperty(target, key, {

      set: function(value) {

        if (this[isFirstChangeKey] === undefined) {

          this[isFirstChangeKey] = true;

        } else {

          this[isFirstChangeKey] = false;

        }

        // No operation if new value is same as old value

        if (!this[isFirstChangeKey] && this[cachedValueKey] === value) {

          return;

        }

        console.log("set value", value);

        const oldValue = this[cachedValueKey];

        this[cachedValueKey] = value;

        const simpleChange: SimpleChange<T> = {

          firstChange: this[isFirstChangeKey],

          previousValue: oldValue,

          currentValue: this[cachedValueKey],

          isFirstChange: () => this[isFirstChangeKey]

        };

        callback.call(this, this[cachedValueKey], simpleChange);

      },

      get: function() {

        return this[cachedValueKey];

      }

    });

  };

}

class Person {

  @OnChange<string>(function(newVal, sc) {

    this.trigger(newVal, sc)

  })

  private name: string = "wan";

  trigger (newVal, simpleChange) {

    console.log('newVal', newVal);

    console.log('simpleChange', simpleChange);

  }

}

const p = new Person();

p.name = "aa"; // first time, trigger changes

p.name = "aa"; // second time, no trigger

p.name = "bb"; // Trogger changes

const cachedValueKey = Symbol();

this[cachedValueKey]