代码的复用是一件很常见的事情，如果是公共代码的复用那还好说，直接做成一个内部私有库，想用的话安装一下 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的以下几种写法都是符合规范的：
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对应如下：