Javascript 如何使用React+；从MobX 5迁移到MobX 6；没有添加200%语法噪音的臃肿代码的TypeScript？

我正在尝试将我的TypeScript/create react应用程序从MobX 5迁移到MobX 6。在官方迁移指南（）中，他们提出了以下建议：

移除所有装饰器，并在构造函数和 明确定义应使用哪个字段使哪个字段可见 装饰师

但他们并没有说如何使用TypeScript应用程序实现这一点。给出的示例总是直接使用纯JavaScript和

React.RenderDOM

下面是一个简化示例的开始—我需要迁移的一个典型类：

@observer
export default class LoginPage extends React.Component<ILoginPageProps, {}> {
    @observable private email: string = process.env.REACT_APP_DEFAULT_LOGIN_EMAIL || "";
    @observable private password: string = process.env.REACT_APP_DEFAULT_LOGIN_PASSWORD || "";

    constructor(props: ILoginPageProps) {
        super(props);
        this.state = {};
    }

重构后的代码存在着难以言表的问题。仅举几个例子：

• 要生成类型安全代码，每个可观察属性的名称必须键入三次。例如，名称“email”出现在字段声明、makeObservable调用的类型声明和makeObservable调用的annotations参数中。有些类最多可以包含100个属性、计算属性和操作
• 由于字段名出现在不相关的位置，因此无法再使用标准重构工具重构此代码。没有一个IDE可以正确地重构字段或MobX操作方法的名称
• 所有属性获取程序和操作的名称都必须是三倍的，而且它们也不能很容易地重构
• 将方法标记为“绑定操作”的信息与方法定义分离。如果您快速查看一个方法定义，那么您无法判断这是否是一个MobX操作
• 同样的表示属性getter——它们可能是经过计算的，但您必须向上滚动到另一个位置才能找到

他们建议的另一件事是使用

npxmobxundecorate

——但它不适用于TypeScript。我试过了，结果把我的代码搞乱了。最终在一个无限循环中耗尽了我所有的CPU，打印了无休止的回溯等。最后它生成了如下代码：

export default const LoginPage = observer(class LoginPage extends React.Component<ILoginPageProps, {}> {
    private email: string = process.env.REACT_APP_DEFAULT_LOGIN_EMAIL || "";
    private password: string = process.env.REACT_APP_DEFAULT_LOGIN_PASSWORD || "";

    constructor(props: ILoginPageProps) {
        super(props);

        makeObservable<LoginPage, "email" | "password">(this, {
            email: observable,
            password: observable,
        });

        this.state = {};
    }

export default const LoginPage=observer（LoginPage类扩展React.Component{
私人电子邮件：string=process.env.REACT_APP_DEFAULT_LOGIN_email|124;|；
私有密码：string=process.env.REACT_APP_DEFAULT_LOGIN_password|；
构造器（道具：ILoginPageProps）{
超级（道具）；
使可观察到（这个{
电子邮件：可观察，
密码：可观察，
});
this.state={}；
}

这是荒谬的，甚至不是有效的TypeScript代码。（export default const只是无效的语法。）它用函数调用替换了我的类，同时创建了一个名称冲突。函数的名称和类的名称是相同的

就我所见，推荐的方法会让一切变得更糟

---

所以我最后的问题是：有没有一种方法可以将React/MobX/TypeScript代码从MobX 5重构到MobX 6，而不会让代码变得一团糟？有人找到了实现这一点的方法吗？

好吧，看起来您已经尝试了三种迁移方法中的第一种，但只有在以下情况下才推荐这种方法：

如果您希望在代码库中删除装饰程序，并且项目还不是太大，那么这是推荐的方法

但我同意，这种编写存储的方式对于TS、大量复制等来说确实相当困难

如果您想继续使用decorator，只需将它们保持在原来的位置，并在构造函数中调用

makeObservable（this）

，就像文档中所说的：

保留所有decorator并在构造函数中调用makeObservable（this）。这将获取decorator生成的元数据。如果要限制MobX 6迁移的影响，建议使用此方法

还有第三种方法，我认为这是目前最好的方法，没有任何膨胀：

移除装饰器，并在类构造函数中使用makeAutoObservable（this）

---

我只是引用了您已经阅读过的文档，我不能建议任何其他迁移方法。如果您有装饰师的大型项目，那么首先使用第二种方法，然后如果您喜欢，逐渐迁移到第三种方法。

这个问题不是重复的-这个问题是关于存储注入的。我们不能使用makeAutoObservable我的大多数类都有超类。我仍然需要找出如何处理这个问题。因此，基本上，你建议我不要删除我的装饰器。我得出了相同的结论，但我想看看是否有更好的选择。我只是不明白他们为什么建议在fir中删除装饰器我知道规范不是最终的。但它似乎仍然是完成这项工作的最佳工具。正如我所想，我的大多数类都会遇到“Error:[MobX]‘makeAutoObservable’只能用于没有超类的类”。因此，剩下的唯一选项是保留所有注释并添加makeObservable（此）Mabx5和Mux6代码之间的唯一区别是这些使MaxEngabyVistabor（这个）调用。我认为这是纯语法噪声。

export default const LoginPage = observer(class LoginPage extends React.Component<ILoginPageProps, {}> {
    private email: string = process.env.REACT_APP_DEFAULT_LOGIN_EMAIL || "";
    private password: string = process.env.REACT_APP_DEFAULT_LOGIN_PASSWORD || "";

    constructor(props: ILoginPageProps) {
        super(props);

        makeObservable<LoginPage, "email" | "password">(this, {
            email: observable,
            password: observable,
        });

        this.state = {};
    }