越來越多人開始嘗試使用 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 中完成的工作反饋給社區。
資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
其它嘗試
對於 Vue 組件模板代碼的類型檢查社區中也陸續進行過其它嘗試，我們從katashin的這篇文章了解到了幾種思路的利弊。
方式一：將 Vue 模板編譯后進行檢查
因為 Vue 實際上也是將模板編譯成了 js 代碼，因此可以實現一個模板 -> TS 的編譯器，對編譯后的結果進行類型檢查。這一方式的問題是 vue-template-compiler 不能提供 source map 的支持，因此在轉化之后無法標記出發生錯誤的位置。
方式二：實現一個類型檢查器
參考 Angular 的方式重新實現一個類型檢查器，這種方式可以使用 Typescript API 的部分能力，但與 Typescript 本身還有較大差距，想要實現一些復雜的類型檢查（例如函數重載、泛型）是非常困難的。
方式三：將模板轉化為 Typescript AST
這種方式可以完全利用 Typescript 編譯器的能力，並且也可以正確標記出錯誤發生的位置。這也是最終 katashin 給 vetur 的 patch 中所使用的方式，目前是通過 vue-eslint-parser 完成了這一轉化過程。