mobx challenge: getters and setters into an observable array

Question

I'm trying to write getters and setters into an observable array and it isn't working. The code below gives me the following error: Error: [MobX] No annotations were passed to makeObservable, but no decorator members have been found either

I've tried different combinations of decorators, but nothing seems to work. The behavior I want is whenever AppModel.text is updated, any UI rending the getter for text should update. Also whenever gonext() is called on the object, then any UI rending from AppModel.text should update and render data from the new 0 item on the array.

class DataThing
{
    @observable text?: string = "foo";
}

class AppModel
{

    get text() { return this.items[0].text}
    set text(value: string | undefined) { this.items[0].text = value;}

    items: DataThing[] = observable( new Array<DataThing>());

    constructor() { 
        makeObservable(this);  
        this.items.push(new DataThing());
    }

    gonext() { this.items.unshift(new DataThing()); }
}

EDIT:

I ended up doing the following, but would still like to understand how to index into an array in an observable way.

class DataThing
{
    @observable text?: string = "zorp";
    constructor(){makeObservable(this);}
}

class AppModel
{
    @observable _current?:DataThing;
    get current() {return this._current;}

    items: DataThing[] = observable( new Array<DataThing>());

    constructor() { 
        makeObservable(this);  
        this.gonext();
    }

    gonext() { 
        this.items.unshift(new DataThing()); 
        this._current = this.items[0];
    }
}

question from:https://stackoverflow.com/questions/66055146/mobx-challenge-getters-and-setters-into-an-observable-array

Answer 1

Waitting for answers