React JS项目接入TypeScript遇TS17001错误的解决方法

问题本质 #

JavaScript允许JSX元素存在同名属性（运行时最后一个属性生效），但TypeScript会严格校验语法合法性，TS17001就是因为检测到重复属性触发的编译错误，必须修复才能通过TS编译。

分步解决方案 #

1. 批量清理重复属性 #

全项目大量文件存在该问题，手动修改效率太低，推荐用以下方式批量处理：

• 编辑器全局正则替换：在VS Code中打开全局查找替换，使用正则匹配重复的属性对。比如针对你的md={4}和md="12"场景，可匹配：

  md={(\d+)}\s+md="(\d+)"
  

  替换为你需要保留的属性（比如md={$1}或md="$2"，根据业务逻辑选择正确值）。如果是反向的重复（先字符串后数字），调整正则即可。
• 脚本批量处理：如果正则无法覆盖所有复杂场景，可写Node.js脚本遍历项目中的.js文件，借助@babel/parser解析JSX AST，遍历并删除重复的属性节点，最后重写文件。

2. 统一Props写法规范 #

修复后要统一组件属性的写法，避免再次出现类似问题：

• 以Antd的Col组件为例，md属性接受数字、字符串或响应式对象，项目内要统一写法（比如统一用数字类型md={4}，不要混用md="12"）。
• 在ESLint中启用react/jsx-no-duplicate-props规则，配置到项目的ESLint配置文件中，在编码阶段就拦截重复属性的写法。

3. 确保JS文件支持JSX编译 #

因为你的文件是.js而非.jsx，需要在tsconfig.json中配置jsx选项为react或react-jsx，同时确保include字段包含所有需要编译的.js文件：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "allowJs": true,
    // 其他配置...
  },
  "include": ["src/**/*.js", "src/**/*.jsx"]
}

注意事项 #

• 修复重复属性前，一定要确认每个重复属性的业务含义，保留正确的那个值，避免破坏原有功能。
• 不要试图通过关闭TS的严格校验绕过该错误，这会埋下潜在的运行时问题，也违背了接入TypeScript的初衷。

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