React Vite TypeScript 5中装饰器为何表现为TS4旧版风格？

核心原因 #

你在@vitejs/plugin-react-swc中设置的tsDecorators: true是关键问题——这个配置会强制SWC启用TypeScript 4旧版实验性装饰器模式，完全忽略你项目中TypeScript 5的版本和tsconfig的设置。

旧版装饰器和TS 5的标准装饰器API完全不同：

• 旧版方法装饰器的第二个参数是方法名的字符串，而非标准装饰器的ClassMethodDecoratorContext对象
• 旧版装饰器是直接修改原方法，不需要返回替换函数，所以你写的replacementMethod不会被调用

解决步骤 #

1. 移除旧版装饰器开关
   删掉vite.config.ts中@vitejs/plugin-react-swc配置里的tsDecorators: true，这个配置是用来兼容旧代码的，和TS 5标准装饰器冲突。

2. 修正tsconfig.json配置
   确保你的tsconfig.json（注意是.json不是.ts）包含以下配置：

   {
     "compilerOptions": {
       "target": "ESNext", // 至少ES2022，标准装饰器依赖该版本特性
       "module": "ESNext",
       "experimentalDecorators": false, // 默认就是false，明确声明避免歧义
       "useDefineForClassFields": true // 类字段的标准行为，和装饰器联动
     }
   }
   

3. 升级插件版本
   确保@vitejs/plugin-react-swc是最新版本，早期版本对TS 5标准装饰器的支持可能不完善，执行以下命令升级：

   npm install @vitejs/plugin-react-swc@latest --save-dev
   

4. 验证标准装饰器代码
   用TS 5标准装饰器语法编写测试代码，比如：

   function Log(target: any, context: ClassMethodDecoratorContext) {
     console.log("Context:", context); // 此时会输出ClassMethodDecoratorContext对象
     return function (...args: any[]) {
       console.log("Method called");
       return target.call(this, ...args);
     };
   }
   
   class Demo {
     @Log
     hello() {
       console.log("Hello World");
     }
   }
   
   new Demo().hello();
   

   运行后应该能看到Context对象输出，以及Method called和Hello World的日志。

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