Function extendObservable

  • Extends an object with new properties and makes them observable.

    Type Parameters

    • T
    • R extends {
          [key: string]: any;
      }

    Parameters

    • target: T

      The object to be extended and observed.

    • properties: R

      The properties to add to the target object.

    • Optional overrides: {
          [key: string]: "atom" | "computed" | "collection" | "reactiveProps" | false;
      }

      Optional overrides to define the type of the reactive property. If an override is false, the key will be ignored.

      • [key: string]: "atom" | "computed" | "collection" | "reactiveProps" | false
    • Optional options: {
          name: string;
      }

      Options to configure the observable behavior.

      • name: string

        The name of the observable object. Defaults to an empty string. Using as prefix for reactive property names.

    Returns T & R

    The extended object with observable properties.

    Example

    let object = {
    value: 0,
    get double() {
    return this.value * 2;
    },
    increment() {
    this.value++;
    },
    };

    makeObservable(object, { value: "atom", double: "computed" });
    extendObservable(object, {a: 1, b: 2});

    let foo = 0;

    autorun(() => {
    foo++;
    object.a;
    });

    console.log(foo); // 1
    object.a++;
    console.log(foo); // 2