vue3 的 template typescript 支持稀烂，退坑

[jenson47]

截止目前 vue3 已经发布 4 年多了，用了几个月 vue3 ，template 的 typescript 支持真的稀烂。

不吹不黑，如果说 tsx 的 typescript 支持跟 vue3 的 template 支持差距不大，也就不说了，tsc 检查 template 无法提示组件不存在的属性，官方 vscode 插件 vue official 2.2.8 版本 用起来更是让人蛋疼，组件自动识别飘忽不定，高亮也是飘忽不定，就连 script 部分提示也会出错。

也许你会说重启试试，无法自动导入，手动导入呀，template 支持不行，你也可以用 tsx 写呀

也有人说，我写代码就是一把梭，复制粘贴，什么 typescript ，直接 anyscript 和 unkonwscript 走起

我只能说对对对

[iceprosurface]

@ochatokori

试试我这个方案，ts 体验很好，vue3 版本刚开发玩，vue2 的用了很久了。

https://vueireact-docs.vercel.app/

https://github.com/iceprosurface/vueireact

[iceprosurface]

再补充一个 playground 地址，可以直接试试语法

https://vueireact-repl.vercel.app/

[jenson47]

@iceprosurface
vue3 的 ts 出现两个问题，1. vue 对 ts 支持不是很完善，在 template 里很多无法自动补全，template 的 ts 校验也没有
2. 由于体量大，vscode 的 typescript 默认有限制，需要将设置放开[typescript.preferences.includePackageJsonAutoImports 设置]( https://github.com/microsoft/TypeScript/issues/53116)


后面尝试了 tsx 格式，发现在 ts 声明上还是有问题，然后我用了 [vue tsx 类型申明增强]( https://github.com/aibayanyu20/vite-plugins/tree/main/packages/tsx-resolve-types)“
如何使用 [在 vue3 中更丝滑的去使用 tsx]( https://juejin.cn/post/7323088217334743059)

[daliusu]

直接用 tsx 就行了，.vue 压根没法用，vue official💩一样，又卡提示又不稳定

[iceprosurface]

@jenson47 #23

你说的这个我之前用过，项目大了以后 defineComponent 很卡的，而且最关键的是类型声明很麻烦。

所以最后考虑是放弃一点性能，完全依靠官方 ts 的语法来实现,所有的属性都从 props 传递，scoped slot 用 children 约束：



这样编辑器也不卡了，写起来还方便

[iceprosurface]

你们可以试试在线去看看这个实现： https://s.icepro.top/TFXr5z

泛型什么支持也都很好用

[runlongyao2]

你说的不提示能举几个例子么？因为我也用 vue3 的 ts ，觉得也还好，没特别困难

[jenson47]

@iceprosurface #25 tsx 模式基本上没问题，
1. 官方的 tsx 最大的一个问题是，props 是申明使用的 Prop 来做的
解决这个问题我用的是这个 tsx 增强
[vue tsx 类型申明增强]( https://github.com/aibayanyu20/vite-plugins/tree/main/packages/tsx-resolve-types)“
如何使用 [在 vue3 中更丝滑的去使用 tsx]( https://juejin.cn/post/7323088217334743059)
```
import {defineComponent} from "vue";

interface Props {
name: string
}

export const Test = defineComponent((props: Props) => {
return () => (
<div>{props.name}</div>
)
})

export const Test1 = defineComponent<Props>((props) => {
return () => (
<div>{props.name}</div>
)
})
```

2. 这个问题其实不是 vue ，ts 他们的问题，是 vscode 官方的问题，在 monorepo 类型的项目中，typescript 加载受限，这样子导致自动补全偶尔飘，参考下 设置放开[typescript.preferences.includePackageJsonAutoImports 设置]( https://github.com/microsoft/TypeScript/issues/53116)

[jenson47]

@runlongyao2 #27
.vue 的 ts 支持问题， 在 script 标签下是没问题的
但是在 template 下就有点稀烂了，使用 ts 主要就是自动补全，属性类型校验，实际上 template 下属性类型校验等于无。
事件和 slot 都无法自动补全提示，比如我随便写一个不存在的事件，也不报错，如果是完整的 ts 的话，自动补全提示+类型完整性校验肯定是有的

[iceprosurface]

@jenson47 不完全是这个问题，vue-tsc 在超大项目里面跑就是很卡，你换 tsc 就不卡

同理 ts language server 不卡，vue language server

我觉得核心还是 vue 现在 ts 推导太复杂，需要简化

[iceprosurface]

@jenson47 你想要更好的 temlate 提示的话，可以考虑用 vue marcos 代价是编辑器更卡了