vue-type-check: Vue 模板中的 Typescript 類型檢查

愈來愈多人開始嘗試使用 Typescript 編寫他們的 Vue 項目，Vue 自己也在不斷增強對 Typescript 的支持（官方提供 vue-class-component 庫、使用 Typescript 編寫 Vue 3.0 等），可是對於組件中模板部分的類型檢查仍然有很大的侷限性。

爲此咱們開源了一個易於使用的 Vue 類型檢查器： vue-type-check，能夠對 Typescript 編寫的 Vue 組件中模板和腳本的部分均進行類型檢查。

vue-type-check 同時提供了 CLI 和 API 兩種使用方式，而且輸出清晰的錯誤提示以便和現有的工做流無縫銜接。

示例

咱們對如下 Vue 單文件組件進行類型檢查，其中包含了兩個類型錯誤：

• 在模板中使用的變量 msg 並無在組件中定義。
• printMessage 方法中錯誤地對字符串類型的值使用 toFixed 方法。

<template>
  <div id="app">
    <p>{{ msg }}</p>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  name: "app",
  data() {
    return {
      message: "Hello World!"
    };
  },
  methods: {
    printMessage() {
      console.log(this.message.toFixed(1));
    }
  }
});
</script>
複製代碼

更多使用方式可參考文檔。

工做原理

目前 vue-type-check 徹底基於 vetur 的 interpolation feature 實現，interpolation 的內部實現能夠參考這篇文章。

之因此要在 vetur 的基礎上開發 vue-type-check 是爲了不其侷限性：

• vetur 以 vscode 編輯器插件的形式存在，不能很好地和持續集成等工做流進行集成，使用場景有限。
• vetur interpolation 目前仍是實驗性功能，而且因爲實現方式較爲 hack，所以使用時穩定性還有所欠缺，實際使用時會遇到 vue language server crash 須要重啓的問題。相比之下 vue-type-check 只對已經完成編輯的文件進行類型檢查，穩定性更佳。
• vetur interpolation 還未作太多的性能優化，在咱們一個有大量自動生成的 Typescript 代碼的項目中會致使 vscode 很是卡頓。

實際上在此以前咱們還嘗試過其它實現方式，但最終咱們仍是轉向了基於 vetur 進行開發，由於咱們但願避免重複的開發，而且持續地將 vetur 中最新的功能和優化應用在 vue-type-check 中。

另外一方面 vetur 也有提供 CLI 使用方式的規劃，咱們也會嘗試將 vue-type-check 中完成的工做反饋給社區。

其它嘗試

對於 Vue 組件模板代碼的類型檢查社區中也陸續進行過其它嘗試，咱們從 katashin 的這篇文章瞭解到了幾種思路的利弊。

方式一：將 Vue 模板編譯後進行檢查

由於 Vue 實際上也是將模板編譯成了 JS 代碼，所以能夠實現一個模板 -> TS 的編譯器，對編譯後的結果進行類型檢查。這一方式的問題是 vue-template-compiler 不能提供 source map 的支持，所以在轉化以後沒法標記出發生錯誤的位置。

方式二：實現一個類型檢查器

參考 Angular 的方式從新實現一個類型檢查器，這種方式可使用 Typescript API 的部分能力，但與 Typescript 自己還有較大差距，想要實現一些複雜的類型檢查（例如函數重載、泛型）是很是困難的。

方式三：將模板轉化爲 Typescript AST

這種方式能夠徹底利用 Typescript 編譯器的能力，而且也能夠正確標記出錯誤發生的位置。這也是最終 katashin 給 vetur 的 patch 中所使用的方式，目前是經過 vue-eslint-parser 完成了這一轉化過程。