# Function observable

- observable<T>(obj?): T & (abstract new (...args: any[]) => ObservableMixin)

- Mixin to add observable functionality to a class.

  Observability allows you to watch for changes to properties on an object.

  Observability is handled by this mixin but if you have an accessor property that is backed by a backing field and that backing field is updated separately from the accessor set, you must call support/observableUtils!notifyChange for the accessor property after the backing field has changed to ensure watchers are notified of the change.

  The implementation of the mixin expects that accessor properties with a setter use the value given to the setter as the new value that will be returned by the getter.

  See support/observableUtils!watch.

  See support/observableUtils!notifyChange.

  See support/observableUtils!onWatch.

  See support/observableUtils!watchEvent.

  See support/observableUtils!once.

  Usage example of the mixin by wrapping a base class.

      class MyClass extends observable(BaseClass) {
          foo: string = "foo";
      }

      const myClass = new MyClass();
      watch(myClass, "foo", (newValue, oldValue) => {});

  Usage example of the mixin used as a base class.

      export class MyClass extends observable() {
          private _otherObservable: OtherObservable = new OtherObservable();

          get foo(): string {
              return this._otherObservable.foo;
          }

          constructor() {
              super();

              onWatch(this, "foo", () =>
                  watch(this._otherObservable, "foo", () => {
                      notifyChange(this, "foo");
                  })
              );
          }
      }

  Usage example of the mixin by wrapping a class implementation.

  Note: while this pattern is supported, it is not recommended since it will not allow observable functionality to be used by the class in itself.

      const MyClass = observable(
          class MyClass {
              foo: string = "foo";
          }
      );

      const myClass = new MyClass();
      watch(myClass, "foo", (newValue, oldValue) => {});

  #### Type Parameters

  - T extends (new (...args: any[]) => any) = (new () => ObservableMixin)

  #### Parameters

  - `Optional` obj: T

    The class to make observable.

  #### Returns T & (abstract new (...args: any[]) => ObservableMixin)