【踩坑记】Vue & TypeScript 增量编译

一般在提交（commit）代码前会对暂存区中的代码执行 eslint 检查，检查通过后执行 commit 命令，对于使用到 TypeScript 的项目 eslint 并不能对类型进行校验(还有 template 中的参数类型)，需要使用 tsc --noEmit 对 ts 文件进行语法校验。因为我们项目中使用的是 vue & TypeScript 所以使用 vue-tsc 包对代码进行校验。

一开始，直接修改 package.json 的校验逻辑

"lint-staged": {
  "*.{vue,ts,js}": [
    "eslint",
    "vue-tsc --noEmit"
  ]
},

发现对于使用到了 ‘@/’ 别名的路径 ts 不能正常识别，但我在 tsconfig 文件中是正常声明了的

"paths": {
  "@/*": ["src/*"]
},

查阅资料发现如果在 package.json 写  lint-staged 的配置，tsc 读取不到 tsconfig.json 文件，解决方案是在项目的根目录下创建 lint-staged-config.js，通过配置文件编写配置

// lint-staged-config.js
module.exports = {
    "*.{vue,ts,js}": () => {
        return [
            "eslint",
            "vue-tsc --noEmit",
        ];
    }
  };

上面配置完毕后，满怀欣喜的准备接受胜利的果实，果然现实总是充满磨难。

修改文件、执行 commit 提交代码，通过 eslint后，执行 vue-tsc --noEmit 命令，发现需要很长时间，于是感觉不妙。最后发现：vue-tsc --noEmit 命令会对所有的文件进行校验，而不是像 eslint 那样只校验暂存区中的文件。

查阅 TypeScript 文档发现 incremental 配置可以实现增量编译

www.typescriptlang.org/tsconfig#in…

具体来说就是首次执行 tsc 会生成一个配置文件 .tsbuildinfo，以后再执行 tsc 时会根据配置文件进行增量编译，速度会变快。

于是又兴高采烈的去尝试....

声明 incremental 为 true

执行 tsc 果然生成了了配置文件（第一次速度很慢），再次执行 tsc 命令就会很快，可见 incremental 关键字起作用了呢。

上面是使用 tsc 进行测试的，因为 vue 项目使用 vue-tsc 对 ts 代码进行编译和校验，所以接着使用 vue-tsc 进行验证。

但 执行 vue-tsc --noEmit 生成的配置文件中只有一行版本信息，第二次执行 vue-tsc --noEmit 命令速度也不会快。

查阅资料发现 incremental 如果和 --noEmit（不生成编译后的文件）并不能实现增量编译，遂 ts 增量校验的想法破产。希望后续可以支持下

使用 npm 包的版本号如下：

"vue-tsc": "^0.38.9"
"typescript": "^4.3.2",

另外发现 tsc 并不能像 eslint 那样把命令行中的参数和配置文件进行组合校验。