[筆記] Vue 2 導入 TypeScript 相關記事

本篇實屬 TypeScript 初心者,在將它與 Vue 2 的專案合併時所遇上的一系列掙扎後,最後作出個讓上手環境的難度較低的環境成品。

vue typescript


項目

1. Vetur 的套件衝突問題

由於想利用 EsLint 和 StyleLint 的規則檔,和 VS Code 內的套件進行整合,以達成「按下存檔,就自動排版好格式」的目標,也順帶統一管理規則。這時,集編譯、highlight、縮排於一身的 Vetur 工具,就顯得有些冗於,且容易發生衝突。經過測試後,jcbuisson 的 vue 套件進行 highlight、外加上 Vue 3 Snippets 來進行簡寫提示功能。

不過若只安裝上面兩套,那麼在瀏覽 .vue 的檔案時,會無法使用 TypeScript 的檢查功能。目前這點尚無兩全其美的解法。

2. VS Code 的設定檔調整

承接上個項目,最後得到的設定檔 json 如下:

3. ES Lint 自動編排無法使用

通常問題會發生在你的 .eslintrc 設定檔並非在開啟視窗的根目錄下,可以在根目錄中新增 .vscode 資料夾,並在其內新增的 settings.json 如下:

4. 是否要使用 Class-Components 的撰寫模式

這點起先滿掙扎的,畢竟 TypeScript 的 Class 特色是一大優勢,但 Vue 在撰寫之初的設計概念就並不相同。用 Vue.extend() 的話,跟原先的 Object-based 的寫法比較起來差異最少,也不需要額外安裝一大堆的開發套件如 vue-class-component … 等。因為若你要用 vuex, vue-router 的話,還得額外安裝不少東西,造成入手門檻上升許多。最後,我選擇用 Vue.extend() 的方法。

5. 如何引入原生的 JavaScript 第三方套件

如果官方沒有特別出 TypeScript 版本的話 ( 以 Chart.js ) 為例,那麼可以先下載 chart.js 的 JavaScript 版本後,再額外去尋找有無新增描述檔,如 @types/chart.js 。

下載後,在要使用 Chart.js 的地方引入即可。


參考資料

1. vue中引入typescript开发使用vue.extend()和vue.class-component
2. Update: the Class API proposal is being dropped.
3. Vue.js × TypeScript でclass style componentを廃止した話

按讚加入粉絲團

延伸閱讀