Vite+TypeScript+SWC项目装饰器无法使用的解决方法求助

你遇到的问题是因为SWC的装饰器支持需要单独在Vite配置中开启，仅靠tsconfig的experimentalDecorators配置不足以让SWC正确解析装饰器语法。以下是具体解决步骤：

1. 配置Vite的SWC插件 #

修改你的vite.config.ts（或.js）文件，在@vitejs/plugin-react-swc的配置中开启SWC的装饰器解析：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [
    react({
      swcOptions: {
        jsc: {
          parser: {
            syntax: 'typescript',
            decorators: true, // 开启装饰器语法解析
          },
          // 如果你的代码需要使用装饰器元数据（比如依赖reflect-metadata），添加下面这行
          transform: {
            decoratorMetadata: true,
          },
        },
      },
    }),
  ],
})

2. 调整tsconfig配置 #

实验性装饰器和useDefineForClassFields选项存在行为冲突，建议将useDefineForClassFields设为false，确保tsconfig.app.json的相关配置如下：

{
  "compilerOptions": {
    ...
    "useDefineForClassFields": false,
    "experimentalDecorators": true,
    // 若需元数据支持，添加此项
    "emitDecoratorMetadata": true,
    ...
  }
}

3. 重启Vite服务 #

配置修改后，关闭当前的Vite开发服务器，重新启动，即可正常使用装饰器语法。

补充说明 #

SWC作为独立的转译工具，其语法解析规则不直接继承tsconfig的配置，因此必须在Vite插件配置中明确开启装饰器支持。如果后续需要切换到TC39标准装饰器（非实验性），则需要调整配置为标准装饰器的相关设置，但当前你的代码写法属于实验性装饰器范畴，按上述步骤即可解决问题。

内容的提问来源于stack exchange，提问作者Jeffery Tang