React项目VS Code报组件被误判为类型错误 代码可正常运行是何原因

这个错误属于VS Code的TypeScript语言服务误报，和实际代码逻辑无关，所以项目可以正常启动运行，常见诱因有3个：

• VS Code内置的TypeScript版本和项目本地依赖的TypeScript版本不一致，语法解析逻辑存在差异，误将JSX组件调用识别为类型声明操作
• TypeScript语言服务缓存损坏，会出现报错漂移、和实际编译结果不符的问题
• 若你使用React17及以上版本，tsconfig中"jsx": "react"的旧配置会导致JSX语法解析异常

按顺序执行以下操作即可解决：

1. 切换VS Code使用项目本地的TypeScript版本
   打开任意.tsx后缀的文件，按下Ctrl+Shift+P（Mac系统为Cmd+Shift+P）唤起命令面板，输入TypeScript: 选择TypeScript版本，选择「使用工作区版本」选项。
2. 重启TypeScript语言服务
   再次唤起命令面板，输入TypeScript: 重启TS服务器，等待服务加载完成后即可看到误报消失。
3. 可选适配配置
   如果使用React17及以上版本，将tsconfig.json中compilerOptions配置项的"jsx": "react"修改为"jsx": "react-jsx"，适配新版React的无导入JSX转换逻辑，避免后续出现同类解析问题。
4. 极端情况处理
   如果以上操作无效，完全关闭VS Code后删除项目根目录下的.vscode文件夹（提前备份你自己添加的自定义配置），再重新打开项目即可。

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