vue2.5 与 typescript 不知不说的那些事

前言

没有特殊原因建议还是不要过快往vue中加入typescript，typescript和vue是比较成熟，但vue刚添加支持，契合度以及资料等都比较少，所以容易踩到坑，写起来并不顺手。

记得之前 Evan 也说过要支持typescript的事情，不过因为 vue 的一些特性与 typescript 比较难以兼容，所以放弃了，本来以为不会太快官方支持 ts ，没想到2.5就接受了来自 ts 官方团队的PR。

下面介绍一下，最近学习 ts 的一些教训和心得。

什么是 typescript

typescript简称ts，是 javascript 的一个超集，也就是在 javascript 上设置一层封装，加入了 ts 的功能特性，最终检查编译为js。

function hello(msg: string): void {
     
    console.log(`hello, ${msg}`);
}
hello('laolei');   // true
hello(12);  // Argument of type '12' is not assignable to parameter of type 'string'

ts加入的根本目的还是添加可选的静态类型编程方式，相对于 flow 这种类型检查器语言侵入性比较小，API 相对灵活易用，在上面代码中进行函数声明时只需定义传入参数类型以及函数返回值类型即可，如果调用或者编写函数时与静态类型产生冲突，那么在 ts 进行编译检查时即会报错。

function hello(msg) {
       
    console.log("hello, " + msg);
}
hello('laolei');

编译后的结果还是我们想要的

ts编译过程

大概原理主要是编译+执行，主要分为三步：

1. 解析
2. 转换
3. 生成

上图就是基本流程了

1. Scanner
   ts的编译机制会根据当前 ts 依赖、配置等情况进行源码扫描，生成相应 Token</