MobX装饰器报错，如何正确配置并解决？

MobX以其简洁和强大的响应式编程模型，在前端状态管理领域占据了一席之地，使用装饰器语法（如@observable、@action）来定义状态和操作，代码风格优雅且直观，深受开发者喜爱，许多开发者在初次使用或在新项目中集成MobX时，常常会遇到与装饰器相关的编译错误，这通常是因为JavaScript/TypeScript的装饰器特性目前仍处于实验阶段,需要特定的构建工具配置才能正常工作。

---

错误根源：装饰器支持未开启

最核心的错误信息通常类似于：“Support for the experimental syntax ‘decorators’ isn’t currently enabled”，这明确指出了问题所在：你的项目所使用的编译器（如Babel）或解释器（如TypeScript）默认不支持装饰器语法,你需要手动开启这一实验性功能。

解决方案：配置你的构建环境

根据项目使用的不同工具链，配置方法也各不相同,以下是几种主流场景下的解决方案。

在TypeScript项目中配置

对于使用TypeScript的项目，配置相对简单，你只需在项目根目录的tsconfig.json文件中,显式地启用两个编译选项。

打开tsconfig.json，在compilerOptions中添加或修改以下两项：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
  }
}

这两个选项的作用如下表所示：

配置项	作用
experimentalDecorators	必须启用，它告诉TypeScript编译器要解析并处理装饰器语法。
emitDecoratorMetadata	建议启用，它为装饰器生成额外的元数据，这对于一些依赖反射的库（例如某些依赖注入框架或MobX的某些高级用法）是必需的。

保存文件后，TypeScript编译器就能正确识别@observable等装饰器了。

在Babel项目中配置

如果你的项目使用Babel作为JavaScript转译器（例如通过Create React App创建的项目，或自定义的Webpack配置），你需要安装并配置@babel/plugin-proposal-decorators插件。

安装插件：
npm install --save-dev @babel/plugin-proposal-decorators

在你的Babel配置文件（如babel.config.js或.babelrc）中，将该插件添加到plugins数组的最前面，插件顺序至关重要，它必须在其他可能转换类语法的插件（如@babel/plugin-proposal-class-properties）之前运行。

// babel.config.js
module.exports = {
  presets: [
    // ...其他presets
  ],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    // ...其他plugins
  ],
};

使用Create React App (CRA)

标准的Create React App项目默认封装了Babel配置，直接修改较为繁琐，推荐使用craco（Create React App Configuration Override）这样的工具来覆盖默认配置，而无需eject。

安装craco和装饰器插件后，在craco.config.js文件中添加Babel插件配置,方法与上述自定义Babel项目类似。

---

现代MobX的推荐做法：告别装饰器

值得注意的是，从MobX 6开始，官方团队推荐使用makeObservable和makeAutoObservable这两个函数来替代装饰器语法。

import { makeAutoObservable } from 'mobx';
class TodoStore {
  todos = [];
  constructor() {
    // makeAutoObservable会自动将类中的所有属性和方法转换为observable/action/computed
    makeAutoObservable(this);
  }
  addTodo(task) {
    this.todos.push({ task, completed: false });
  }
}

这种方式的优点显而易见：

• 零配置：无需任何Babel或TypeScript配置,开箱即用。
• 更好的兼容性：兼容所有JavaScript环境，包括私有字段（#privateField）。
• 更明确的作用域：在构造函数中调用,清晰地表明了哪些部分被MobX管理。

虽然装饰器语法很优雅，但考虑到配置的复杂性和实验性，makeAutoObservable是启动新MobX项目时更现代、更稳健的选择。

---

相关问答FAQs

A1: 这通常是VSCode的工作区设置问题，VSCode可能使用其内置的TypeScript版本，而不是你项目node_modules中的版本，请打开命令面板（Ctrl+Shift+P），输入“Select TypeScript Version”，并选择“Use Workspace Version”,确保VSCode使用了你已配置好的项目TypeScript版本。

A2: 不推荐，虽然技术上可能实现，但混合使用两种不同的API会导致代码难以理解和维护，官方建议是统一风格：要么全部使用装饰器（并承担配置成本），要么全部使用makeObservable/makeAutoObservable（推荐的做法），对于新项目,强烈建议选择后者。