ObserverDemo.ts

import { observable, makeObservable, autorun, runInAction } from 'mobx';

function assignValueToMember(self: object, memberName: string, version: number) {
    console.log('\n');
    // @ts-ignore
    const dispose = autorun(() => console.log(`autorun ${memberName} == ${self[memberName]}`));
    console.log(`assign  ${memberName} = ${version}`);
    runInAction(() => {
        // @ts-ignore
        self[memberName] = version;
    });
    dispose();
}

export class Base {
    version = 0;
    @observable
    notAssigned_01?: number;
    @observable
    assignedBeforeMakeObservable_02?: number;
    @observable
    assignedAfterMakeObservable_03?: number;
    @observable
    notAssignedWithBang_04!: number;
    @observable
    initializedWithNull_05: number | null = null;
    @observable
    notAssignedInitializedWithUndefined_06?: number = undefined;
    @observable
    initializedValue_07 = 0;
    @observable
    assignedUndefinedInBeforeMakeObservableConstructor_08?: number;

    @observable
    assignedUndefinedInAfterMakeObservableConstructor_09?: number;

    constructor() {
        this.assignedBeforeMakeObservable_02 = -1;
        this.assignedUndefinedInBeforeMakeObservableConstructor_08 = undefined;
        makeObservable(this);
        this.assignedAfterMakeObservable_03 = -1;
        this.assignedUndefinedInAfterMakeObservableConstructor_09 = undefined;
    }

    update() {
        console.log(`\n======== Base ========`);
        this.assignMember('notAssigned_01');
        this.assignMember('assignedBeforeMakeObservable_02');
        this.assignMember('assignedAfterMakeObservable_03');
        this.assignMember('notAssignedWithBang_04');
        this.assignMember('initializedWithNull_05');
        this.assignMember('notAssignedInitializedWithUndefined_06');
        this.assignMember('initializedValue_07');
        this.assignMember('assignedUndefinedInBeforeMakeObservableConstructor_08');
        this.assignMember('assignedUndefinedInAfterMakeObservableConstructor_09');
    }

    protected assignMember(memberName: string) {
        assignValueToMember(this, memberName, +this.version);
    }
}

export class DerivedNotCallingMakeObservable extends Base {
    @observable
    notAssignedDerived?: number;
    constructor() {
        super();
    }

    update() {
        console.log(`\n======== DerivedNotCallingMakeObservable ========`);
        this.assignMember('notAssignedDerived');
    }
}

export class DerivedCallingMakeObservable extends Base {
    @observable
    notAssignedDerived?: number;
    constructor() {
        super();
        makeObservable(this);
    }

    update() {
        console.log(`\n======== DerivedCallingMakeObservable ========`);
        this.assignMember('notAssignedDerived');
    }
}

export class DerivedNoConstructor extends Base {
    @observable
    notAssignedDerived?: number;

    update() {
        console.log(`\n======== DerivedNoConstructor ========`);
        this.assignMember('notAssignedDerived');
    }
}

export function runDemo() {
    new Base().update();
    new DerivedNotCallingMakeObservable().update();
    new DerivedCallingMakeObservable().update();
    new DerivedNoConstructor().update();
}

runDemo();
/*
======== Base ========
autorun notAssigned_01 == undefined
assign  notAssigned_01 = 0
autorun notAssigned_01 == 0

autorun assignedBeforeMakeObservable_02 == -1
assign  assignedBeforeMakeObservable_02 = 0
autorun assignedBeforeMakeObservable_02 == 0

autorun assignedAfterMakeObservable_03 == -1
assign  assignedAfterMakeObservable_03 = 0
autorun assignedAfterMakeObservable_03 == 0

autorun notAssignedWithBang_04 == undefined
assign  notAssignedWithBang_04 = 0
autorun notAssignedWithBang_04 == 0

autorun initializedWithNull_05 == null
assign  initializedWithNull_05 = 0
autorun initializedWithNull_05 == 0

autorun notAssignedInitializedWithUndefined_06 == undefined
assign  notAssignedInitializedWithUndefined_06 = 0
autorun notAssignedInitializedWithUndefined_06 == 0

autorun initializedValue_07 == 0
assign  initializedValue_07 = 0

autorun assignedUndefinedInBeforeMakeObservableConstructor_08 == undefined
assign  assignedUndefinedInBeforeMakeObservableConstructor_08 = 0
autorun assignedUndefinedInBeforeMakeObservableConstructor_08 == 0

autorun assignedUndefinedInAfterMakeObservableConstructor_09 == undefined
assign  assignedUndefinedInAfterMakeObservableConstructor_09 = 0
autorun assignedUndefinedInAfterMakeObservableConstructor_09 == 0

======== DerivedNotCallingMakeObservable ========
autorun notAssignedDerived == undefined
assign  notAssignedDerived = 0

======== DerivedCallingMakeObservable ========
autorun notAssignedDerived == undefined
assign  notAssignedDerived = 0
autorun notAssignedDerived == 0

======== DerivedNoConstructor ========
autorun notAssignedDerived == undefined
assign  notAssignedDerived = 0
 */