未分類
19 3 月 2021

到底要怎样才能在 vue3 的 vue 文件里使用上完整的 TS 语法？ 只能用一半可太离谱了

到底要怎样才能在 vue3 的 vue 文件里使用上完整的 TS 语法？ 只能用一半可太离谱了

資深大佬 : skypyb 2

某一部分特性在 vue 文件里还能用上一点，比如类型约束，IDE 做类型推断也还行。

但是会有些其他的特性用不了， 比如我遇到这这俩问题。
一个是接口不能直接在 type=’ts’ 的 script 块中定义。(试了下类也一样)
还有就是无法使用类型断言。

在 .ts 文件里就能用， 在 vue 里就不能用。 你说像是接口这种就算了， 定义在 ts 文件里引进来我还能拿着用 (？其实这也很怪)。 像这种需要做类型断言的地方我就真的是没办法了… 

Unexpected reserved word 'interface' (6:4)    4 |     import {NotesView} from '@/api/uinfo-service';   5 | > 6 |     interface Ass {     |     ^   7 |         asv: string   8 |     }   9 | 

 Unexpected token, expected "," (10:29)     8 |         props: {    9 |             note: { > 10 |                 type: Object as PropType<NotesView>,      |                              ^   11 |                 required: true   12 |             }   13 |         },

搜遍了各个地方， 没找到相似的例子。我甚至不知道是什么地方出的问题。 版本？插件？配置？
没办法只能来这求助啦

下边贴几个文件， 大佬们帮看下呗

大佬有話說 (24)

  • 資深大佬 : iold

    你应该需要告诉 ts, *.vue 也是 ts 文件, ts 配置里 include 一下 ts 存在哪些文件后缀文件里. 例如 “include”: [“src/**/*.ts”, “src/**/*.d.ts”, “src/**/*.tsx”, “src/**/*.vue”]

  • 主 資深大佬 : skypyb

    @iold 刚按照你说的试了下， 仍然不行。 其实是可以在 vue 里用 ts，也配置过了 shims-vue.d.ts ，只是有不少莫名其妙的问题 (比如我上边说的)。

  • 資深大佬 : cereschen

    你这个报错是哪个服务报错的 发完整一点

  • 資深大佬 : shakukansp

    lang=”ts”

  • 資深大佬 : avastms

    Vue 和 TypeScript 不兼容的， 只能是主要逻辑单独写在外面的 ts 文件里，vue 只做引用调用。
    想要 vue 里面使用 ts, 太难受了，yyx 不支持。

  • 資深大佬 : einq7

    @avastms 请问 yyx 是什么

  • 資深大佬 : ShareDuck

    @einq7 是指作者吧。

  • 資深大佬 : ruoxie

    直接 tsx 不香吗？写 template 没提示，还不如不用 TS

    https://github.com/lowcoding/lowcode-vscode/blob/vite2/webview-vue-webpack/src/views/snippet/Detail/index.tsx

    写一个 vscode 插件 webview 部分的时候分别用 react 跟 vue3 撸了一次，简直不要太像

  • 資深大佬 : Rocketer

    个人感觉因为 Vue 定位于简单，所以就用最简单的 JS，这是匹配的。

    想用 TS，就最好整体升级，用 React 或者 Angular 。非得用 TS 写 Vue，有种用专业咖啡机做速溶咖啡的感觉，没必要，也没什么好的效果。

  • 資深大佬 : ericls

    这就是我所说的 用做框架的思想做语言 肯定会出问题

  • 資深大佬 : Zzzz77

    首先 vue3 绝对绝对绝对是支持 ts 的，上面说不兼容的几位朋友应该是对 vue 并不太了解。
    回到主的问题，第一点，script 标签应该是<script lang=”ts”>，而不是 type=”ts”，我不确定是不是你的笔误。
    如果排除这一点，其实以上信息很难看出问题出在哪，我只能给几个建议：
    一，如果方便的话，可以贴出仓库地址，大家可以帮你检查问题出在哪
    二，去看看一些 vue3 ＋ ts 的案例，看看区别在哪里，这种案例 github 一搜一堆，我前段时间也在 v 站上发过一个 vue3 ＋ ts 的项目，你也可以翻我的主题看看
    三，最简单有效的办法，直接用 cli 生成一个 vue3 ＋ ts 的项目模板，对比检查问题出在什么地方

    顺带一提，上面有朋友认为写 template 没提示，还不如不用 TS，个人不太认同，template 是可以通过 ide 插件（如 vscode ）支持 ts 提示的，至于 template 和 tsx 哪个好，就见仁见智了～

  • 資深大佬 : iold

    @skypyb #2 你用 cli 生成个 vue3+ts 的项目做对比。

  • 資深大佬 : bojackhorseman

    vue2 + composition-api + ts 写起来也蛮香的

  • 資深大佬 : solos

    建议换 angular

  • 資深大佬 : tolking

    vscode + vetur 没有遇到这些问题，模版的提示据说要等到 setup 稳定后增加。毕竟不是标准的 ts，需要通过 ide 插件辅助支持。

  • 資深大佬 : Cbdy

    应该不行

  • 資深大佬 : beginor

    要体验完整的 ts 支持， 建议试试 angular，ng 11 默认开启严格模式， 真是强迫症的福音！

    另外 react 也不错， tsx 有特供的 ts 支持！

    为啥非得在 vue 上吊死？

  • 資深大佬 : suzic

    我们就是那样用的，没碰到主说的问题。建议主检查下是不是 type=’ts’ 的原因，正确的写法是”lang=ts”

  • 資深大佬 : emilll

    主写法没错的

    <script lang=”ts”></script>

    另外 vue3 推荐使用 volar 插件

  • 資深大佬 : hotsymbol

    用 Typescript 写 Vue ？是脑子不好使吗？用 React 和 Angular 不能写 Typescript 吗？还是不思进取吗？

  • 資深大佬 : Jaosn

    这个帖子给我看乐了，几个回复也十分有趣，比如我上这位

  • 資深大佬 : Sparetire

    建议 Vue3 用 volar, Vue2 用 vetur

  • 資深大佬 : rodrick

    不明白 vue 写 ts 怎么就有人觉得能上升到脑子不好了

  • 資深大佬 : xiaoliaoliao

    推荐 volar 但是这插件也不是很成熟 eslint 没法用，如果需要未使用变量报错可以在 tsconfig 的 compilerOptions 中增加字段”noUnusedLocals”: true