Function observable

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) => {});
Copy

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");
            })
        );
    }
}
Copy

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) => {});
Copy