带有“declare”修饰符的字段不能在这里初始化，只能在构造函数中初始化

Question

我什至不知道从哪里开始，也不知道要寻找什么。

我正在升级旧的 React、Node、Express 全栈应用程序，我正在采取的步骤之一是添加 TypeScript。该项目仍然使用 WebPack 和 Babel，我已经升级了它们，但我没有知识或时间用其他东西替换它。在升级过程中，我了解到使用 babel-loader 转换 TypeScript 比 ts-loader 更好。没关系，只要它有效。不过，我还尝试升级 Sequelize 并实现sequelize-typescript 以实现更具声明性的模型。但尝试编译它时，我收到一个我不明白的奇怪错误，因为我已经遵循了我读过的所有指示。

（预计到达时间：如果我使用 ts-loader，这确实有效，所以它是 Babel 和/或其配置特有的。似乎应该有一种方法让 babel-loader 支持与 ts-loader 相同的编译如果人们推荐它而不是 ts-loader。）

错误是：

ERROR in ./lib/models/payment-typed.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/chris/code/ps-client/lib/models/payment-typed.ts: Fields with the 'declare' modifier cannot be initialized here, but only in the constructor
  12 | })
  13 | export class PaymentTyped extends Model {
> 14 |   @Column({
     |   ^
  15 |     type: DataTypes.INTEGER,
  16 |     allowNull: false,
  17 |     autoIncrement: true,
    at File.buildCodeFrameError (/Users/chris/code/ps-client/node_modules/@babel/core/lib/transformation/file/file.js:195:12)
...

它尝试编译的代码是：

import { Column, Model, Table } from 'sequelize-typescript'
import { DataTypes } from 'sequelize'

@Table({
  createdAt: 'CreatedOn',
  modelName: 'Payment',
  timestamps: true,
  freezeTableName: true,
  tableName: 'Payment',
  updatedAt: 'UpdatedOn',
  hasTrigger: true
})
export class PaymentTyped extends Model {
  @Column({
    type: DataTypes.INTEGER,
    allowNull: false,
    autoIncrement: true,
    primaryKey: true
  })
  declare ID: number
...

我认为相关的配置部分是：

...
export const BabelPresets = (envPreset) => [
  ['@babel/preset-env', envPreset],
  [
    '@babel/preset-react',
    {
      runtime: 'automatic'
    }
  ],
  [
    '@babel/preset-typescript',
    {
      onlyRemoveTypeImports: true,
      allowNamespaces: true,
      dts: true,
      allowDeclareFields: true
    }
  ]
]

export const JavaScriptRules = (envPreset) => ({
  test: /\.(js|ts)x?$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: BabelPresets(envPreset),
      plugins: [
        // https://babeljs.io/docs/babel-plugin-transform-typescript#typescript-compiler-options
        'babel-plugin-transform-typescript-metadata',
        ['@babel/plugin-proposal-decorators', { version: '2023-11' }],
        [
          'babel-plugin-typescript-to-proptypes',
          { mapUnknownReferenceTypesToAny: true, strict: true }
        ]
      ]
    }
  }
})
...

我什至不知道如何调试或研究这个。谷歌搜索出现了看似完全不相关且不相干的东西。

我可以在配置或代码中更改哪些内容才能使此或类似的功能正常工作？

谢谢

Answer 1

在您的代码中，您尝试在使用declare声明的字段上使用属性装饰器（@column）。在 Typescript 中，声明字段只能在构造函数中初始化，这就是您看到错误的原因。

解决方案：

去掉declare修饰符，正常定义属性即可：

@Column({
    type: DataTypes.INTEGER,
    allowNull: false,
    autoIncrement: true,
    primaryKey: true
  })
  ID: number