[TypeScript] @OnChange for ngOnChanges

Take away from NGCONF talk.

 

It is a good show case to how to use decorator.

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

 

One take away is that we can use 'symbol' to uqine key.

const cachedValueKey = Symbol();

this[cachedValueKey]