babel-proposal-decorators 和 typescript-decorator 之间的不兼容是由于它们采用了不同的语法规则。Babel 的装饰器实现依赖于 @babel/plugin-proposal-decorators 插件,而 TypeScript 的装饰器实现依赖于 TypeScript 编译器本身。因此在 babel-proposal-decorators 中使用 TypeScript 装饰器时,会出现编译错误。
解决方法是使用 @babel/plugin-proposal-decorators 插件的 legacy 参数,并将 TypeScript 装饰器作为 Babel 插件的一部分使用。下面是示例代码:
npm install --save-dev @babel/plugin-proposal-decorators
npm install --save-dev @babel/plugin-proposal-class-properties
npm install --save-dev @babel/preset-typescript
{
"presets": ["@babel/preset-typescript"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
]
}
import { observable } from 'mobx';
class Todo {
@observable name = 'Test';
}