MobX(ver6)のデコレーターが動かない。

reactのstate管理はreduxを使っていたのですが、新しい案件で気になっていたmobxを使ってみました。

日本語の情報ではデコレーターと呼ばれる@observableのような記法を使っている方が多く、それで試してみたら全く動きません。babelならplubinを追加、typescriptのみならtsconfig.jsonに設定をしないと動かないというのはみましたが、それをしても動きません。

どうやらver6からただデコレーター書いただけでは動かなくなったようです。

https://mobx.js.org/enabling-decorators.html
こちらに説明があります。

• デコレーター記法はESの標準化がなかなか進まず、実装が変わりそうなので互換性のためにver6では使わずに、代わりにmakeObservable / makeAutoObservableを使いましょう。
• ただし、デコレーターとして使えるものはmakeObservableのアノテーションとして残しました。

と言うことです。つまりコンストラクタでmakeObservableを呼ぶ必要があると言うことです。

import { makeObservable, observable, computed, action } from "mobx"

class Todo {
    id = Math.random()
    @observable title = ""
    @observable finished = false

    constructor() {
        makeObservable(this)
    }

    @action
    toggle() {
        this.finished = !finished
    }
}

class TodoList {
    @observable todos = []

    @computed
    get unfinishedTodoCount() {
        return this.todos.filter(todo => !todo.finished).length
    }

    constructor() {
        makeObservable(this)
    }
}

本家のドキュメント見るとアノテーションすら使ってないんですよね。一応アノテーションは今後もサポートする「つもり」(We intend to continue to support decorators in this form)と書いてあるので大丈夫そうですけど、ドキュメントに習って使うのやめようかな〜。