如何在Create React App中正确使用TypeScript 5装饰器？

问题背景 #

TypeScript升级到5.x版本后，大部分语言特性（含ESLint支持）都正常工作，但装饰器功能出现异常：代码在TypeScript编译和ESLint检查阶段均无报错，但运行时调试发现装饰器函数的target参数是整个对象，context参数为字符串"bar"——这符合旧版装饰器语法的行为，判断是Babel插件强制启用了旧版装饰器逻辑。项目已执行eject操作，需要解决两个核心问题：

• 如何覆盖Babel的旧版装饰器行为
• 如何定位Webpack插件的添加来源

临时修复步骤 #

通过以下操作解决了当前问题：

1. 为.ts文件配置指定的Babel插件，启用新版装饰器语法
2. 找到项目依赖中的babel-preset-react-app/create.js文件，注释掉其中两处启用旧版装饰器的代码

长期维护方案 #

直接修改node_modules内的文件会在NPM执行install或update操作时被覆盖，因此需要：

• Fork官方的babel-preset-react-app仓库
• 在自己的fork版本中修改装饰器相关配置，移除旧版装饰器的启用逻辑
• 将项目中的babel-preset-react-app依赖替换为自己的fork版本

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