使用babel-loader编译sequelize-typescript模型时出现declare字段错误

问题分析 #

你遇到的编译错误源于Babel对新装饰器提案（2023-11版本）的处理逻辑，与sequelize-typescript依赖的旧版（legacy）装饰器语法不兼容，同时缺少必要的类字段处理插件，导致Babel误将带declare修饰符的字段解析为需要初始化的普通字段。

解决方案 #

1. 调整Babel装饰器插件配置 #

将装饰器插件切换为legacy版本，并添加类属性处理插件：

export const JavaScriptRules = (envPreset) => ({
  test: /\.(js|ts)x?$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: BabelPresets(envPreset),
      plugins: [
        'babel-plugin-transform-typescript-metadata',
        // 切换为legacy装饰器版本，适配sequelize-typescript
        ['@babel/plugin-proposal-decorators', { legacy: true }],
        // 添加类属性处理插件，确保Babel正确解析类字段
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        [
          'babel-plugin-typescript-to-proptypes',
          { mapUnknownReferenceTypesToAny: true, strict: true }
        ]
      ]
    }
  }
})

2. 修改TypeScript预设配置 #

关闭Babel的dts选项（该选项用于生成类型声明，建议用tsc单独处理，避免与装饰器逻辑冲突）：

export const BabelPresets = (envPreset) => [
  ['@babel/preset-env', envPreset],
  [
    '@babel/preset-react',
    {
      runtime: 'automatic'
    }
  ],
  [
    '@babel/preset-typescript',
    {
      onlyRemoveTypeImports: true,
      allowNamespaces: true,
      allowDeclareFields: true,
      // 移除dts选项，避免类型声明生成阶段的冲突
      // dts: true
    }
  ]
]

3. 确保tsconfig.json配置正确 #

检查你的tsconfig.json是否开启了装饰器相关必要选项：

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    // 其他原有配置...
  }
}

验证逻辑 #

修改配置后重新编译即可解决错误，核心原因：

• Legacy装饰器模式与sequelize-typescript的装饰器实现完全兼容
• 类属性插件让Babel正确处理类字段与装饰器的结合语法
• 关闭dts选项避免了Babel在类型声明生成阶段的额外冲突

内容的提问来源于stack exchange，提问作者Chris Simpson