Published on

在 vue3 中写 tsx，编辑器识别为 React 模式报错怎么破？

Authors
  • avatar
    Name
    Hansuku
    Twitter

两年没更新了，诈个尸，最近终于有时间来卷了

最近在重构公司表单系统，底层物料组件逻辑比较复杂需要 jsx 的能力，vue 这边是支持的，并且代码写完编译运行没有任何问题，但是编辑器里跳出来一个幺蛾子：

恩？你怎么用明朝的剑斩清朝的官？ 第一个报错只在 webstorm 中有，vscode 里是没问题的，这个好解决，因为本身 React17 以后 jsx 对 react 导入的依赖已经不存在了，所以这其实是 WebStorm 的锅，配置上关关掉就行，基本上以后就算是 react 代码也不会再用到这个检查了：

第 2.3 个问题比较复杂，看报错，很显然，IDE 的 ts 检查器把 tsx 的代码默认以 react 的方式去执行了，我先上解决方案，不想深究的就没必要往下面看排坑历程了： ts 的配置里给compilerOptions.types设置成[]即可。

然后先上一下排坑历程，github 上搜了一圈发现好像压根没几个人用 tsx 写 vue（按照尤大的说法渲染函数没控制好 render 容易有性能损耗）。然后想到vue的模板里是有 tsx 配置选项的（注意不是 vue-cli 的那个vue create，这玩意是没有 tsx 配置的。）

❯ npm init vue test-tsx
npx: 1 安装成功，用时 1.548 秒

Vue.js - The Progressive JavaScript Framework

✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
...

这就好办了，他这里是基于 vite 的模板那直接用他的生成一个然后写 demo 看看就好：

这个模板下写 tsx 是没问题的，对比检查 tsconfig，唯一的区别就在types: []这个配置，ts 官方的解释是： 原文链接 最后一句话其实就很好的解释了这个问题，因为我们现在用esmodule越来越多所以可能会比较不好理解，以前写代码比较喜欢全局挂Vue、React。 本质上来说其实算是关闭了编辑器对 JSX 里匹配标签签名，，因为tsconfig里的tsx都是以 react为基础的预设，而编辑器读取到了"jsx": "preserve"后会以全局声明了react的tsx模式去签名匹配导致报错，其实这里的全局声明已经基本没什么用了，正常使用import导入的包是不受影响的，他还是会去导入types的。

Discuss on Twitter • View on GitHub
*/}