解放双手-vue语法自动转typescript

最新推荐文章于 2024-10-04 15:36:53 发布

原创

最新推荐文章于 2024-10-04 15:36:53 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

本文介绍了一个基于@babel的工具，用于自动将Vue.js代码转换为TypeScript。通过@babel/parser解析Vue语法，然后使用@babel/generator转换回TS代码。文章详细讨论了转换过程，涉及props、data、model、computed、watch、methods、lifeCycle等多个方面，并提到已将该工具打包为npm包，方便开发者使用。

代码的复用是一件很常见的事情，如果是公共代码的复用那还好说，直接做成一个内部私有库，想用的话安装一下 npm包就行了，但是业务代码的复用就不好做成包了，一般都是复制粘贴

我一般写代码的时候，如果觉得某段业务代码以前见过其他人写过，那么考虑到业务优先性，只要别人的代码不是写得太烂，我一般会优先抄别人的代码，省得自己再写一遍
然后我就遇到了一个问题，公司目前前端项目大部分都是 vue，早期没有 ts这个说法，后来新项目才逐渐引入 ts，所以新项目用的是 vue-ts，而一般想抄的老代码都是没有引入 ts的，固然，这二者是可以兼容存在的，但对于有着轻微代码洁癖的我来说，还是不想看到同一个项目代码里掺杂着 ts和非 ts两种写法的，所以只要有时间，我都会尽量手动把老代码转化为 ts规范的

难度倒是没多少，只不过每一份都要手动转一遍，转得多了我忽然陷入沉思，我好像 repeat myself了啊，不太能忍，于是决定写一个自动将 vue-js转成 vue-ts的工具

这个工具的代码已经被我放到 github 上了，并且为了方便使用，我已经将其做成了一个 npm 包，感兴趣的可以亲自试一下

@babel

涉及到 js语法转换的东西，第一时间想到的就是 babel了，babel早就提供了丰富完善的 js语法的解析与反解析工具

@babel/parser

@babel/parser 是负责解析 js语法的工具，可以理解为将 js语法转化为 ast，方便开发者进行自定义处理，通过 plugins来支持多种 js语法，例如 es6、es7、ts、flow、jsx甚至是一些实验室的语法(experimental language proposals)等

例如：

const code = 'const a = 1'
const ast = require("@babel/parser").parse(code)

转换后的 ast就是一个对象，数据结构描述的就是 const a = 1这个表达式

在这里插入图片描述

对这个 ast进行遍历，就可以获得所有当前解析的 js语法的信息，自然也能对其进行修改

@babel/generator

有解析就有反解析，@babel/generator用于将 @babel/parser解析出的 ast转化回字符串形式的 js代码

const code = 'const a = 1;'
const ast = require("@babel/parser").parse(code)
const codeStr = require('@babel/generator').default(ast).code
code === codeStr // => true

其他

一般 @babel/parser、@babel/generator 和 @babel/traverse会一起出现使用，前两个前面已经介绍过了，至于 @babel/traverse，其主要作用就是对 @babel/parser生成的 ast进行遍历，提供了一些方法，省得开发者自己去做各种判断

不过我这里写的这个程序，因为不需要太过细致的解析，所以没用 @babel/traverse这个东西，我按照自己的意愿对 ast进行遍历操作

除此之外，babel还提供了一些其他的工具库啦帮助库啦，一般都不太用得到，想要详细了解的可以自己去看文档

本文下面所说的操作，基本上都是在 @babel/parser 转换后的 ast，以及 @babel/generator 解析后的代码字符串上进行的

props

vue官网对于 props的介绍在 props

因此 props的以下几种写法都是符合规范的：

export default {
   
   
  props: ['size', 'myMessage'],
  props: {
   
   
    a: Number,
    b: [Number, String],
    c: 'defaultValue',
    d: {
   
   
      type: [Number, String]
    }
    e: {
   
   
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
   
   
        return value >= 0
      }
    }
  }
}

上述转换为 ts对应如下：

export default class YourComponent extends Vue {
   
   
  @Prop() readonly size: any | undefined
  @Prop() readonly myMessage: any | undefined
  @Prop({
   
    type: Number }) readonly a: number | undefined
  @Prop([Number, String]) readonly b: number | string | undefined