vue语法自动转typescript(解放双手)

2020-06-12 21:08:05易采站长站整理

所以就是把原 components的属性全部映射一遍即可

mixins

vue官网对于 mixins的介绍在 mixins

其值类型为 Array<Object>


export default {
mixins: [A, B]}

上述转换为 ts对应如下:


export default class TransVue2TS extends Mixins(A, B) {}

原本 extends Vue改成 extends Mixins,并且 Mixins的参数就是原 mixins的所有数组项

provide && inject

当我考虑如何处理这两个的时候,看了下 vue官网,官网上对于这两个是这么说的:

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

并且在这段话上,还专门用红色感叹号标识了一下,说白了就是不建议你在业务代码中,因为这不利于数据的追踪,完全可以使用成熟的 vueBus或者 vuex代替,一般也不会用到这个东西的,我写这个转换程序也是为了转换业务代码,所以我没有对这两个做处理,如果发现代码中存在这两个属性,会提示你自己手动处理

emit && ref

这两个都只是一种类似语法糖的东西,可以不做处理

文件处理

上述是针对一份 .vue文件的详细处理的逻辑,想要真正的接入实际文件乃至文件夹的处理,自然少不了文件的读取和更新操作,这就涉及到 node的文件处理内容了,不过并不复杂,就不多说了

npm 包

代码写完之后,为了简化使用流程,我将其打包成了一个 npm包上传到 npm上去了,想要使用的话,只需要下载这个包,然后在命令行中输入指令即可


npm i transvue2ts -g

安装完之后,默认是跟 vue-cli一样,会把此库的路径写到系统的 path中,直接打开命令行工具即可使用,同时支持单文件和文件目录耳朵转化transvue2ts是库的指令,第二个参数是需要处理的文件(夹)的 完整全路径例如:处理 E:projecttestAsrctest.vue文件:


transvue2ts E:projecttestAsrctest.vue
=>
输出路径:E:projecttestAsrctestTs.vue

处理 E:projecttestAsrc文件夹下的所有 .vue文件:


transvue2ts E:projecttestAsrc
=>
输出路径:E:projecttestAsrcTs

对于单文件来说,其必须是 .vue结尾,转化后的文件将输出到同级目录下,文件名为原文件名 + Ts,例如 index.vue => indexTs.vue;对于文件目录来说,程序将会对此文件目录进行递归遍历,找出这个文件夹下所有的 .vue文件进行转化,转化后的文件将按照原先的目录结构全部平移到同级目录下的一个新文件夹中,例如 /src => /srcTs